1. 格式化上下文
格式化上下文指的是，页面中的一块渲染区域内部的子元素是如何排版以及相互作用的。
1.1 BFC 块级格式化上下文
BFC渲染规则
- 内部盒子垂直放置。
- 垂直方向的距离由margin决定，一个BFC中的两个相邻盒子会发生margin重叠。
- BFC不会与浮动重叠
- 计算BFC高度时，也要计算浮动元素。
如何创建BFC
- overflow不为visible
- 设置浮动
- 设置定位absolute 或 fixed
- 把非块级元素定义成块级元素。
应用场景
- 自适应两栏布局：BFC区域不会和浮动重叠。左侧浮动定宽，右侧触发BFC即可。
- 浮动造成的父元素高度塌陷：给父元素触发BFC。
- 防止margin合并：给其中一个包裹一层触发BFC。
1.2 IFC 行内格式化上下文
IFC 应用场景
- 水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过 text-align 则可以使其水平居中。
- 垂直居中：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align: middle，其他行内元素则可以在此父元素下垂直居中。
2. 常见布局
2.1 两栏布局
- float + overflow（BFC）
- float + margin
- flex
2.2 三蓝布局
- 两侧float + 中间margin
- 两侧absolut + 中间margin
- flex
3. 回流和重绘
- 回流：是指当DOM元素添加、删除、尺寸位置发生变化时，进行回流得到节点的位置大小等信息。
- 重绘是指当颜色文本阴影等样式修改时，根据信息重新绘制。或者当触发了回流时，因为节点的位置等信息改变了，所以也会进行重绘。
- 如何减少
- style少用
- 少用table
4. 元素水平居中的方法有哪些
- 定位 + margin:auto
- 定位50% + margin负值
- 定位50% + transform -50%
- flex布局/ grid布局
5. CSS3增加了哪些新特性
5.1 选择器
5.2 新样式
- 边框：border-radius
- 阴影: box-shadow
- 背景: background-clip(确定画区);background-size
