浏览器解析和渲染 CSS 的步骤：
§ 解析
将 CSS 字符串转换为包括选择器、属性名、属性值的数据结构，长度单位被转换为像素，关键字被转换为具体值，需要计算的函数转为具体值
§ 级联
相同元素相同属性的最终值基本由书写顺序，按先后决定，此外：
- !important > 其它
- style属性 > 其它
- 选择器优先级 ID > 类 > 类型（标签） > 相邻 > 子代 > 后代 > 通配符 > 属性 > 伪类
- 开发者 > 用户配置 > 浏览器默认属性
- 层叠
根据position不为static等属性或弹性布局中的子元素等情况创建层叠上下文。根据z-index决定层的叠加顺序
§ Render Tree
深度优先遍历之前解析 HTML 得到的 Dom Tree，匹配解析 CSS 得到的 CSSOM
计算元素的位置、宽高，将可见元素的内容和样式放入 Render Tree
§ 布局
分层按照流式布局（块、内联、定位、浮动）、弹性布局、网格布局或表格布局等布置元素，按照尽可能多地展示内容的原则，处理溢出
§ 绘制
分层绘制颜色、边框、背景、阴影
§ 合成
将不同图层分格渲染出位图，可交由 GPU 线程处理
处理图层的透明度opactiy，和变形transform等
将所有图层合到一起
§ 重新渲染
JS 更改 CSS 属性，CSS 动画以及伪类（如hover），内容变更等，可能会引起浏览器重新布局、绘制或者合成
