CSS 常见面试题
带着问题学习或准备面试。
# CSS常见面试题
# 1. 盒模型：标准盒子 与 IE怪异盒子
CSS盒子模型组成部分：content(内容) + padding(内边距) + border(边框) + margin(外边距)
CSS盒模型主要分为两种：W3C标准盒模型 与 IE盒模型, 它们的宽高的计算方式分别如下
重要：当您指定一个 CSS 元素的宽度和高度属性时，只是设置 content(内容区域) 的宽度和高度
css盒子模型中，盒子的实际高度和宽度是否包含 margin ?
根据下面的原型图可以看到，实线以内是盒子的实际大小，故不包含 margin（但是也有人说 margin 算作宽高，因为它占用了像素，很多教程都说宽高包含margin）
# W3C 标准盒模型（标准盒）
W3C 标准盒模型（标准盒）：width 和 height 属性，只包含 content(内容)，不包含 padding 和 border。
width = content(元素内容宽度)
height = content(元素内容高度)
标准盒子模型（盒子实际宽度）= margin + border + padding + content （ content = width ）
注意：标准盒子模型，border 和 padding 不会影响 元素内容(content) 的大小，但是会影响盒子的总尺寸
| 实际效果图 | 原型图 |
|---|---|
 |  |
| 盒子实际宽度 = margin + border + padding + content = 220 | content(元素内容宽度) = width = 100 |
.box {
/* 元素内容宽度(content) = width = 100px */
width: 100px; /* 宽：不包含 padding 和 border 在内 */
height: 100px; /* 高：不包含 padding 和 border 在内 */
padding: 20px; /* 内边距 */
border: 20px solid blue; /* 边框 */
margin: 20px; /* 外边距 */
background-color: red;
}
2
3
4
5
6
7
8
9
# IE 盒模型（怪异盒）：IE8及以下版本浏览器,未声明 doctype 情况下
IE 盒模型（怪异盒）：width 和 height 属性，包含 content + padding + border
width = border + padding + content(元素内容宽度)
height = border + padding + content(元素内容高度)
IE盒子模型（实际总宽度）= margin + width（width = border + padding + content ）
注意：IE盒子模型，border 和 padding 会影响 元素内容(content) 的大小，但是不会影响盒子的总尺寸
| 实际效果图 | 原型图 |
|---|---|
 |  |
| 盒子实际宽度 = margin + width = 140 | content(元素内容宽度) = width - padding - border = 20 |
.box {
/* 元素内容宽度(content) = width - padding - border = 100 - 40 - 40 = 20px */
width: 100px; /* 宽：包含 padding 和 border 在内,一共100px */
height: 100px; /* 高：包含 padding 和 border 在内,一共100px */
padding: 20px; /* 内边距 */
border: 20px solid blue; /* 边框 */
margin: 20px; /* 外边距 */
background-color: red;
/* box-sizing 属性：默认值是 content-box */
/* box-sizing 作用：转化盒模型 */
box-sizing: border-box; /* 转化为 IE 盒子（怪异盒） */
}
2
3
4
5
6
7
8
9
10
11
12
# 2. CSS 高度塌陷 和 清除浮动的方法（BFC机制）
# 什么是高度塌陷？
首先了解一下什么是浮动？
添加了浮动(float)的盒子，会脱离标准文档流(会浮起来)，原来的位置不再保留;
那么下面标准流的盒子，就会向上移动，从而导致，浮动的盒子会压住这个标准流的盒子（被浮动的盒子遮盖住）
1. 产生高度塌陷的原因
在文档流中，父元素的高度默认是由子元素撑开的，等于说子元素多高，父元素就多高，但是当为子元素设置了浮动之后，子元素会脱离标准流，此时，将会导致子元素无法撑起父元素的高度，会导致父元素的高度塌陷。
简而言之：父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷(造成父元素高度为 0)
2. 高度塌陷带来的影响
会使父元素的兄弟元素都想上移动，会使页面布局变化，影响原来的布局
3. 解决高度塌陷的问题
清除浮动，可以解决高度塌陷的问题：因为产生高度塌陷的原因是浮动产生的
<html>
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="box"></div>
</body>
<style>
.father {
width: 100px;
/* 1. 在标准文档流中，父元素默认高度是由子元素撑开的，等于说子元素多高，父元素就多高 */
}
.son {
width: 100px;
height: 100px;
background-color: green;
/* 2. 当子元素写了浮动后,子元素会脱离文档流,此时,将会导致子元素无法撑起父元素的高度，
父元素会发生高度塌陷(造成父元素高度为 0) */
float: left;
}
.box {
/* 3. 高度塌陷带来的影响: 会使父元素的兄弟元素都想上移动，会使页面布局变化，影响原来的布局 */
width: 100px;
height: 100px;
background-color: red;
}
</style>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# 清除浮动的几种方式
方法1：给父元素设置宽高（不推荐，这样设置父元素的高度不会适应子元素的高度）
方法2：给父元素添加 overflow: hidden（不推荐）
方法3：在浮动元素下方添加空div，并添加 clear:both 属性样式（不推荐,会造成大量的代码冗余）
<body>
<div class="father">
<div class="son1">浮动的盒子</div>
<!-- 额外标签法（隔墙法）：在浮动的盒子下面,添加空的 div 元素 -->
<div style="clear: both;"></div>
</div>
<div class="box"></div>
</body>
2
3
4
5
6
7
8
方法4：给父元素添加 :after 伪类（隔墙法升级版，百度/淘宝/网易等用的方法）
<body>
<div class="father clearfix">
<div class="son"></div>
</div>
<div class="box"></div>
</body>
<style>
/* 给父元素添加 after 伪类（隔墙法升级版,百度/淘宝/网易等用的方法） */
.father:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /* IE6、7 清除浮动的方式,*号表示只在IE6-7执行,其他浏览器不执行 */
}
</style>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
方法5：给父元素添加双伪元素（小米/腾讯用的方法）
<body>
<div class="father clearfix">
<div class="son"></div>
</div>
<div class="box"></div>
</body>
<style>
/* 给 父元素 添加双伪元素（小米/腾讯用的方法） */
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /* IE6、7 清除浮动的方式,*号表示只在IE6-7执行,其他浏览器不执行 */
}
</style>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 3. 使用 CSS 实现三角形（如：倒三角）
<html>
<body>
<div class="triangle"></div>
</body>
<style>
.triangle {
width: 0;
height: 0;
border: 100px solid transparent; /* 边框透明 */
border-top-color: red; /* Top: 实现倒三角 */
}
</style>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 4. 保持宽高比例（如：高度为宽度的50%）
方法一
:root是一个伪类选择器，表示文档根元素，所有主流浏览器均支持（除了 IE8 及更早的版本）
:root的作用：声明全局属性,在当前页面可以使用 var() 来引用
<html>
<body>
<div class="box"></div>
</body>
<style>
:root {
--my-width: 200px;
--my-height: calc(var(--my-width) / 2); /* 高度为宽度的50% */
}
.box {
width: var(--my-width);
height: var(--my-height);
background-color: pink;
}
</style>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
方法二
使用
width: 100%;+padding-bottom: 60%;来实现
<html>
<body>
<div class="father">
<div class="son"></div>
<span>此处应该有文字</span>
</div>
</body>
<style>
.father {
width: 100px;
padding: 20px 30px; /* 无关样式 */
background-color: red;
}
.son {
width: 100%;/* 和父元素宽度一样 */
padding-bottom: 60%; /* 高度为宽度的60% */
background-color: green;
}
</style>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22