CSS 样式计算是什么

样式计算的目的是为了计算出DOM数节点中每个元素的具体样式，主要包含三个阶段：

将css转换为浏览器能够解析的结构

标准化样式表中的属性值

计算DOM树中每个节点的具体样式

具体流程图

QQ截图20220724120005.png

浏览器解析 HTML 文件得到 DOM 树，并加载所有的样式规则

在该流程中，浏览器经过filtering 阶段对DOM中的每一个元素节点通过选择器匹配、属性有效等规则，筛选所有当前有效属性值。

筛选结束后，会获得该元素所有声明的属性值（包括浏览器默认样式表）。

当前阶段会确定所有筛选出来有声明确切值，且没有样式冲突的属性的结果，同时保留拥有多个声明值的属性不做处理留待后续流程解决。

在该流程中，浏览器经过 cascading 阶段处理多个声明值冲突的属性优先级的问题。

对于发生冲突的属性值，按照来源、！important、选择器特异性、书写顺序等选出优先级最高的一个属性值。

在该流程中，浏览器经过 defaulting 阶段为层叠值为空的属性指定一个确切的值（继承 or 初始值），经过cascading和defaulting流程后保证指定值一定不为空。

在该流程中，浏览器经过 resolving 阶段，将一些相对值（em、% ...）或者关键字（inherit、initial ...）转化成绝对值，如em转换为px，相对路径转换为绝对路径等。

在该流程结束后，浏览器会在不进行实际布局的情况下，将所有计算值转换为所能得到的最具体的值。

在该流程中，浏览器经过 formatting 阶段将计算值中尚存的相对值进一步全部转换为绝对值。

在该流程结束后，所有计算值已全部被转化为绝对值，不会再有相对值或关键字，即所有值都可用于实际布局。

在该流程中，浏览器经过 constraining 阶段，将使用值中的小数像素值转化为近似整数用于实际渲染。