浏览器解析 html 文档

html 文档到页面呈现

1. 将 html 元素构渐近建成 Dom 树
2. 将 css 都加载完构建成 CSSOM 树（因为 css 中后面的样式会覆盖前面的）
3. 将 Dom 和 CSSOM 树中可见节点合成 Render 树
4. 计算出将要显示元素的大于和相对于 viewport 的位置
5. 将 Render 树转成像素, 显示在屏幕上

参考：
深入理解浏览器解析渲染 HTML
CSS对象模型CSSOM是什么
为什么CSS选择器是从右向左匹配的

属性设置

在第 3 步中, 要求 Dom 节点的所有样式变量都被设置好, 设置过程如下:

1. 确定声明值（没有冲突的声明，直接赋值。浏览器会默认提供一些元素的样式值，称: user agent sheet）
2. 层叠冲突（通过 css 权重来计算最终值）
3. 使用继承（经过上面两步,还没有确定的属性值,如果其父级元素有值,则直接继承过来; 如果没有则用初始默认值）
4. 使用初始默认值