CSS属性值的计算过程

在DOM加载完后，对于一个特定的DOM，浏览器会去找到对应的CSS规则（其过程可通过CSS选择器，内联样式等去找到对应的CSS规则），而CSS中对于DOM的渲染又常常会遇到需要计算的情况，（比如使用了　％，ｅｍ　等，这类相对的值在渲染前都要转换为确定的值）以下将探讨其值是如何最终确定的。

1 尝试找到显示声明

对于某个DOM的对应CSS规则，有一些情况是开发者指定了具体的值，其就按照开发者指定的值进行计算，例如如下代码：

<div class="divcss">这是一段文字</div>

// 对上面的div进行添加样式
.divcss {
    height: 200px;
}

当有多个声明时，则需要进行选择优先级高的进行渲染，例如以下代码（显然内联样式是比类选择器的优先级是更高的，故最终会把 div 渲染成为300px的高度）：

<div class="divcss" style="height: 300px">这是一段文字</div>

// 对上面的div进行添加样式
.divcss {
    height: 200px;
}

2 无显式声明时尝试找到继承值或默认值

当无显式声明一个DOM的样式值时，会考虑使用继承值或者默认值，比如开发者在许多的开发过程中，并不会频繁去设置字体的颜色或者大小等与文字相关的属性值，而这些值在没指定的情况下会自动去寻找更高层级的DOM的对应属性值（比如父级DOM设置了font-size为24px，子级DOM在未设置字体大小的情况下默认就继承了font-size为24px）。

当然，还有一些情况，比如 div 的宽高在不指定的情况下，其默认由内容撑开，这种情况就属于使用了默认值。

3 值的转换（计算相对的值）

我们知道CSS的值并不只是仅限于宽高等属性，如<img>标签中的url值也是值的一种，而我们在使用url时基本会使用相对路径，此时就需要把相对路径转换为绝对路径来方便后续的渲染工作。

于此同时，比如使用了rem, em, vm等单位的属性亦需要知道确切的值，此时就开始转换为具体的px值。

对于使用 % 的属性，就要开始计算具体的值，比如height: 50%是指相对其容器来说，取其容器DOM的height的一半，对于margin: 20% 是指取其自身的宽度的 20% 作为margin值。

注意：在使用比如： margin-top: 20%时，其计算的基准亦是其自身宽度的20%

4 值的格式化

对于相对值而言，在经过了第三步的转换以后，显然会导致有出现小数的情况，比如转换后出现88.8px的情况，显然需要进行规整，因为屏幕的显示是以像素为单位的，不会有像素的一部分显示A颜色另外一部分显示B颜色的情况。此时浏览器会自动进行规整（比如四舍五入等方法），把所有属性的数值都规整为整数，这就是最终会在设备渲染的值。

5 渲染

此时把规整后的值与相应的DOM 进行文档的渲染。