面试

前端面试题汇总-HTML＆CSS篇2.0 实战篇

By yesmore on 2021-10-31
阅读时间 9 分钟
文章共 2k 字
阅读量 次

Tips：

HTNL

1.理解HTML语义化

  • 增加可读性

  • 方便SEO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div>
    <div>
        列表一
    </div>
    <div>
        列表二
    </div>
</div>


<h1>标题</h1>
<ul>
    <li>列表一</li>
    <li>列表二</li>
</ul>

2.块级元素、内联元素

块级元素：display: block/table

如：div、h1、h2、table、ul、ol、p

内联元素：display: inline/inline-block

如：span、img、input、button

CSS

一、布局

1.盒模型的宽度计算

offsetWidth = (内容宽度 + 内边距 + 边框 + 滚动条) 【无外边距】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style type="text/css">
    #div1 {
        width: 100px;
        padding: 10px;
        border: 1px solid #ccc;
        margin: 10px;
    }
</style>

<div id="div1">
    this is div1
</div>

<script>
  document.getElementById('div1').offsetWidth // 122px
</script>

如何让 offsetWidth 等于100px？

设置box-sizing: border-box，表示width设置的宽度包括了内边距、边框

1
2
3
4
5
6
7
8
9
<style type="text/css">
    #div1 {
        width: 100px;
        padding: 10px;
        border: 1px solid #ccc;
        margin: 10px;
        box-sizing: border-box;
    }
</style>

补充：js中其他位置和宽度

clientWidth = width + padding(左右) 不包括边框和外边距、滚动条

clientHeigh = height + padding(上下)

clientTop = border.top(上边框的高度)

clientLeft = border.left(左边框的宽度)

会随对象显示大小的变化而改变

offsetWidth = width + padding + border

offsetHeight = height + padding + border

offsetTop = 外边框距视口顶部

offsetLeft

网页可见区域宽/高，会随对象显示大小的变化而改变

scrollWidth：网页正文全文宽。实际内容宽度（可视区域宽度+被隐藏区域宽度），不包括border和外边距，会随对象中内容超过可视区后而变大。上例中 scrollWidth 为120px；

scrollHeight：网页正文全文高。内容层真实高度（可视区域高度+被隐藏区域高度）

scrollTop：网页被卷去的高

scrollLeft：网页被卷去的左

window.innerHeight = 浏览器窗口的内部高度
window.innerWidth = 浏览器窗口的内部宽度

2.margin纵向重叠

结论：

  • 相邻元素的 margin-top 和 margin-bottom 会发生重叠
  • 空白内容的 p 标签也会重叠
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
    p {
        font-size: 16px;
        line-height: 1;
        margin-top: 10px;
        margin-bottom: 15px;
    }
</style>

<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>

此示例，AAA与BBB之间的距离为 15px

下面说的听不懂的（bushi：

边界叠加：当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。

只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。

解决

边界叠加的大多数问题可以通过添加透明边框或1px的补白来修复：

  • 外层 padding
  • 透明边框 border: 1px solid transparent;
  • 绝对定位 postion: absolute
  • 外层DIV overflow:hidden
  • 内层DIV 加 float: left; display: inline;
  • 外层DIV 有时会用到 zoom:1;

3.margin负值

结论：

  • margin-top、margin-left 负值，元素向上、下移动；
  • margin-right 负值，右侧元素左移，自身不影响；
  • margin-bottom 负值， 下方元素上移，自身不影响

4.BFC理解与应用

定义：

  • Block format context，块级格式化上下文；
  • 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素；

形成条件：

  • float 不是 none
  • position 是 absolute / fixed
  • overflow 不是 visible，如 hidden，auto，scroll
  • display 是 flex / inline-block / table-cell / table-caption

特性：

  • 内部的Box会在垂直方向上一个接一个的放置。
  • 垂直方向上的距离由margin决定，可以解决margin垂直边距重叠问题
  • bfc的区域不会与float的元素区域重叠。如下实现两栏布局；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="column"></div>
<div class="column"></div>

.column:nth-of-type(1) {
float: left;
width: 200px;
height: 300px;
margin-right: 10px;
background-color: red;
}

.column:nth-of-type(2) {
overflow: hidden;/*创建bfc */
height: 300px;
background-color: purple;
}

也可以解决文字环绕：浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <div class="left"></div>
<p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
</p>

<style>
.left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: yellow;
}

    p {
        background-color: green;
        overflow: hidden; 开启BFC
    }
</style>
  • 计算bfc的高度时，浮动元素也参与计算（因为浮动的盒子无法撑出处于标准文档流的父盒子的height）
  • bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素

常见应用：

  • 清除浮动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
    .container {
        background-color: #f1f1f1;
    }
    .left {
        float: left;
    }
    .bfc {
        overflow: hidden; 
        /* 触发元素 BFC */
    }
</style>

<div class="container bfc">
    <img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/>
    <p class="bfc">某一段文字……</p>
</div>

5.float布局以及clearfix

圣杯布局和双飞翼布局：

  • 三栏布局，中间最先加载
  • 两侧固定，中间自适应
  • 一般PC用

实现方式：

  • 使用 float 布局
  • 两侧使用 margin 负值（和中间内容横向重叠）
  • 防止中间内容被两侧覆盖，一个用 padding 一个用 margin

6.flex画骰子

常用的：xxx

二、定位

absolute和relative

  • relative依据自身定位
  • absolute依据父元素定位
  • 子绝父相

居中对齐的实现方式

水平居中：

  • inline：text-align: center
  • block：margin: 0 auto
  • absolute：left :50% + margin-left 负值（子元素宽高明确）

垂直居中：

  • inline：line-height = height
  • absolute：transform(-50%, -50%)
  • absolute：top :50% + margin-top 负值（子元素宽高明确）
  • absolute：[top, left, bottom, right = 0] + [maigin: auto]

三、图文样式

line-height的继承问题：子元素继承父元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>line-height 继承问题</title>
    <style type="text/css">
        body {
            font-size: 20px;
            line-height: 200%;
        }
        p {
            background-color: #ccc;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>这是一行文字</p>
</body>
</html>

上例中，p标签行高为 40px

  • 若line-height为具体值（如30px），则继承具体值；
  • 若为比例（如 1.5），则继承该比例；（16px * 1.5 = 24px）
  • 若为百分比，则继承父元素计算出来的值

四、响应式

rem、em、px、pt、vh、vw

  • rem：相对根元素长度单位
  • em：相对父元素长度单位
  • px：绝对长度单位
  • pt： 固定长度单位，打印体

rem的弊端

  • 阶梯性（不连续）

网页视口的尺寸

  • window.screen.height 屏幕高度
  • window.innerHeight 网页视口高度
  • document.body.clientHeight body高度

vw/vh

  • vh：网页视口高度的 1/100
  • vw：网页视口宽度的 1/100
  • vmax：取vh//vw两者最大值
  • vmin：取两者最小值

响应式布局 - 媒体查询

  • media-query，根据不同的屏幕宽度设置根元素 font-size

  • 再使用rem基于根元素计算

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@media only screen and (max-width: 374px) {
            /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
            html {
                font-size: 86px;
            }
        }
        @media only screen and (min-width: 375px) and (max-width: 413px) {
            /* iphone6/7/8 和 iphone x */
            html {
                font-size: 100px;
            }
        }
        @media only screen and (min-width: 414px) {
            /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
            html {
                font-size: 110px;
            }
        }

五、CSS3

flex

动画

Tips: Please indicate the source and original author when reprinting or quoting this article.

特色标签
面试
链友
ESC