CSS 渲染流程

Filtering

通过给定的所有 CSS 样式，匹配到元素的样式，得到 declared value。每个元素的每个样式可能有 0 或多个。得到声明值（多个）。

Cascading

按照特异性和顺序，为多个属性的样式确定优先级最高的属性值。得到层叠值。

Defaulting

将依旧为空的属性设置继承值或者初始值。此时每个元素的每个属性都一定不为空。得到指定值。

Resolving

将相对值或者关键字转化为绝对值，如 em 变成 px。此时依旧不考虑得到计算值。

Formatting

将计算值进行进一步转换变成绝对值，例如百分比需要计算为 px，得到使用值。

==计算值和使用值什么区别==？

比如某个 width: 100%. 在 resolving 阶段并不能转化为绝对值，因为

Constraining

将计算出来的小数转化成整数。得到实际值（也就是浏览器最终显示出来的值）。

布局相关技术

常规流、绝对定位、浮动

常规流——盒子模型

• margin
• border
• padding
• conten
• width
• height

width 与 height

• 默认指定 content-box 的宽度/高度。
• 长度、百分数（相对于容器）、auto（浏览器控制）
• 注意 height 如果设置百分数，容器需要有指定高度：如果容器设置的是 auto 高度，里面元素设置 100% 高度，此时会出现循环依赖的情况：即容器高度和元素高度相互依赖，最终无法解算。

padding

padding 如果是百分比，则默认相对于 content 的宽度和高度进行计算。

因此 content-box 时需要注意宽度和 padding、border 的关系。

border

border 可以调整四个方向的边框的特性。

margin

使用 margin: auto 可以进行水平居中。上下 margin 可以出现堆叠的情况，需要在同一个 BFC。

box-sizing

• content-box: 只包括 content
• border-box: 包括 padding 和 border

在实际项目中，通常会使用 border-box。

overflow

• visible: 可见益处
• Hidden: 不可见
• scroll: 利用滚动条

盒子和元素——display 属性

元素是 HTML 的概念，盒子是 CSS 里面的概念，一个行（块）级元素生成一个行（块）级盒子。

• block: 块
• inline: 行
• Inline-block: 行，但可以放在行盒子中设置宽高，作为整体不被拆散成多行
• none: 排版的时候忽略

IFC

inline formmating content, 可以