面试指南
CSS 部分

CSS 知识点

待补充：浮动、两栏布局、置换元素、选择器、定位、行内与块级元素、伪元素、CSS data

# 1 CSS3 新特性

新增部分选择器、伪类，如 nth-child
边框支持圆角、阴影
新的背景属性
提供渐变
提供新的文本效果，如文本阴影、换行方式
转换和变形
过渡，transition
动画，@keyframes 规则
多媒体模型，@media

# 2 CSS 画图

# 2.1 CSS 画三角形

基于CSS的盒子模型中，边框 border 实际上是梯形，且在盒子宽高为 0 时缩短为三角形：

使盒子的宽高为 0，并设置较大的边框，其中某些边设置透明的边框。

调整边框粗细，可以画直角三角形、等边三角形等。

# 3 解释 BFC

BFC 是块级格式化上下文（Block Formatting Context），含义是：一个 BFC 区域包含创建该上下文元素的所有子元素，但不包含创建新 BFC 的子元素的内部元素。如：

<div class="box1" id="bfc1">
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5" id="bfc2">
    <div class="box6"></div>
    <div class="box7"></div>
  </div>
</div>

1
2
3
4
5
6
7
8
9

box1 创建一块 BFC 区域 bfc1，且只包含 box2、box3、box4、box5，同时 box5 创建一块 BFC 区域，且只包含 box6、box7。

参考：

https://www.itcast.cn/news/20201016/16152387135.shtml (opens new window)

# 3.1 BFC 的特点

每个 BFC 区域只包含其子元素，不包含其子元素的子元素
每个 BFC 区域相互隔绝，并不影响
BFC 需要触发才可启动

# 3.2 触发 BFC 的条件

它由 body 根元素产生
设置浮动，但 none 除外
设置绝对定位，即 absolute 或 fixed
行内块显示，即 inline-block 或 inline-flex
设置 overflow，即 hidden、auto、scroll，但 none 除外
表格单元格，即 table-cell
弹性布局，即 flex

# 3.3 BFC 的应用

# 3.3.1 解决外边距垂直塌陷问题

两个盒子的 margin 重叠，塌陷到了一起，导致实际距离为 50px。

将两个盒子放到独立的两个 BFC 里，两个 BFC 互不影响，实际距离为 100px。

# 3.3.2 解决外边距包含塌陷问题

父子元素中，给子元素设置 margin 可能会带跑父元素。

让父元素触发 BFC，此时内部 BFC 的操作不会影响到外部。

# 3.4 其他格式上下文

IFC（Inline Formatting Contexts）：内联格式上下文。IFC 的高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)，IFC 中的 line box 一般左右都贴紧整个 IFC，但是会因为 float 元素而扰乱。
GFC（GrideLayout Formatting Contexts）：网格布局格式化上下文。当为一个元素设置 display 值为 grid 的时候，此元素将会获得一个独立的渲染区域。
FFC（Flex Formatting Contexts）：自适应格式上下文。display 值为 flex 或者 inline-flex 的元素将会生成自适应容器。

# 4 CSS 中水平居中、垂直居中的几种方式

# 4.1 水平居中

当前元素是 行内元素：
- 如果父元素是块级元素，给父元素设置 text-align: center
- 如果父元素是行内元素，给父元素设置 display: block 后设置 text-align: center
当前元素是 块级元素：
1. 父子宽度都确定时，给盒子设置 margin: 0 auto，使盒子自己居中
2. 父宽度确定、子宽度不确定时，给盒子设置 display: inline-block 或 display: inline，然后给父元素设置 text-align: center
3. 使用 定位属性，设置父相对、子绝对，给盒子设置 left: 50%（盒子左上角居中），然后左上角再向左偏移：
  - 给盒子设置 margin-left 为盒子宽度一半的负数，用于父子宽度都确定时
  - 给盒子设置 transform: translateX(-50%)，用于任意情况
4. 使用 flex 布局，给父元素设置 display: flex; justify-content: center，用于任意情况

# 4.2 垂直居中

当前元素是 单行行内元素：
- 给该元素设置 line-height 为父元素的 height
当前元素是 多行行内元素：
- 使用表格布局，给父元素设置 display: table-cell; vertical-align: middle
当前元素是 块级元素：
1. 使用 定位属性，设置父相对、子绝对，给盒子设置 top: 50%（盒子左上角居中），然后左上角再向上偏移：
  - 给盒子设置 margin-top 为盒子高度一半的负数，用于父子高度都确定时
  - 给盒子设置 transform: translateY(-50%)，用于任意情况
2. 使用 flex 布局，给父元素设置 display: flex; align-items: center，用于任意情况
3. 使用 表格布局，给父元素设置 display: table-cell; vertical-align: middle

# 4.3 水平、垂直居中

使用 定位属性，设置父相对、子绝对，然后：
- 给盒子设置 top: 0; right: 0; bottom: 0; left: 0，以及 margin: auto，用于宽高均确定时
- 给盒子设置 left: 50%; top: 50%，然后设置 margin-left 为盒子宽度一半的负数，设置 margin-top 为盒子高度一半的负数，用于父子宽高都确定时
- 给盒子设置 left: 50%; top: 50%，然后设置 transform: translateX(-50%) translateY(-50%)，用于任意情况
使用 flex 布局，给父元素设置 display: flex; justify-content: center; align-items: center，用于任意情况

# 5 `display:none`、`visibility:hidden`、`opacity:0` 的区别

相同点：

他们都能使元素隐藏。
DOM 节点都存在（可以被 document 相关方法获取）。

不同点：

文档布局：display:none 在文档中不再占用空间，visibility:hidden 在文档布局中仍占据原来的空间，opacity:0 也占据空间。
回流和重绘：display:none 会引起回流和重绘，visibility:hidden 不会引起回流、只引起重绘，opacity:0 不引起回流和重绘（提升为合成层）。
- 回流：又称重排，页面进行重新排列
- 重绘：页面的颜色与背景修改后重新渲染，回流一定重绘，重绘不引起回流
- 合成层：页面的各个部分分成多个层、单独光栅化；合成层拥有单独的图层，和其他图层之间无不影响
继承性：display:none 不会继承，visibility:hidden 会继承，opacity:0 会继承。
后代是否可见：display:none 的后代元素不可见（直接消失），visibility:hidden 的后代设置 visibility:visible 将可见，opacity:0 的后代无法通过设置 opacity:1 而可见。
事件监听：display:none 和 visibility:hidden 无法进行 DOM 事件监听，opacity:0 可以进行 DOM 事件监听。

# 6 样式优先级

第一类：!important，优先级最高，使用需谨慎
第二类：引入方式，行内样式最高，嵌入样式和引入样式按页面插入顺序决定
第三类：选择器，id 选择器 > 类/伪类/属性选择器 > 后代/伪元素选择器 > 子/相邻选择器 > 通配符选择器
第四类：继承样式，优先级较低
第五类：浏览器默认样式，优先级最低

# 7 CSS 盒模型

可以认为每个 HTML 元素都是一个方块，方块内还可以包含方块，如同盒子一层一层包裹。

盒子从内到外依次是 content 内容、padding 内边距、border 边框、margin 外边距。W3C 盒模型和 IE 盒模型的区别在于 width、height 包含的范围。

# 7.1 W3C 盒模型（标准盒模型）

width 和 height 只包含 content。

触发方式为：

在设置了 DOCTYPE 的默认情况下
在 IE8+ 浏览器中设置 box-sizing 为 content-box 时

# 7.2 IE 盒模型

width 和 height 会包含 content、padding 和 border，更方便设置宽高。