属性值处理流程 · 前端笔记

[TOC] # 值处理一旦用户代理解析了一个文档并构建了一个文档树，它就必须为树中的每个元素以及相应的格式化结构中的每个框分配一个值给应用于目标媒体类型的每个属性。给定元素或框的css属性的最终值是多步骤计算的结果： * 首先，为每个元素的每个属性收集应用于元素的所有声明值。可能有零个或多个声明值应用于元素。 * 层叠产生层叠值。每个元素的每个属性最多有一个级联值。 * 默认值产生指定值。每个元素每个属性只有一个指定值。 * 解析值依赖项将生成计算值。每个元素每个属性只有一个计算值。 * 格式化文档会产生使用值。如果该属性适用于该元素，则元素仅具有给定属性的使用值。 * 最后，根据显示环境的约束条件将使用的值转换为实际值。与使用值一样，元素上给定属性的实际值可能存在，也可能不存在。 ## 声明值应用于元素的每个属性声明都为与该元素关联的属性提供声明值。如 ~~~ <div class="box" style="width: 100px"> ~~~ ~~~css div { width: 10em; } #box { width: 80%; } ~~~ ## 层叠值通过计算层叠优先级，在第一步的多个值中找到优先级最高的那个。 ## 指定值指定值是样式表作者为该元素创作的给定属性的值。它是通过默认进程放入层叠值的结果，保证每个元素上的每个属性都存在指定值。在许多情况下，指定值是层叠值。但是，如果根本没有层叠值，则指定值为默认值。 ## 计算值计算值是解析属性定义表的“计算值”行中定义的指定值的结果，通常将其绝对化以准备继承。 > 注意：计算的值是继承期间从父级传递到子级的值。出于历史原因，它不一定是 `getComputedStyle()` 函数返回的值。计算值可以是相对（即不相对于另一个值，如 red 或 2mm）或绝对（即相对于另一个值，如auto、2em）。计算一个相对值使其绝对化： * 具有相对单位（em、ex、vh、vw）的值必须通过乘以适当的参考尺寸来确定为绝对值 * 某些关键字（例如，smaller、bolder）必须根据其定义进行替换 * 某些属性的百分比必须乘以参考值（由属性定义） * 有效的相对URL必须解析为绝对URL ## 使用值多个属性值结合以后，不一定满足规范的约束，需要根据规范规定的方式确定各个属性最后采用的值。 > 例如，`width：auto` 的声明无法在不知道父元素布局的情况下解析为长度，因此计算值为auto，而使用的值为绝对长度，例如100px。 > 如果一个属性不适用于一个元素，它就没有Used Values；例如，flex属性对不是flex项的元素没有Used Values。 ## 实际值原则上可以使用 Used Values，但是用户代理可能无法在给定环境中使用该值。例如，用户代理可能只能渲染具有整数像素宽度的边界，因此可能必须近似使用的宽度。此外，元素的字体大小可能需要根据字体的可用性或font-size-adjust属性的值进行调整。实际值是进行任何此类调整后的使用值。 # 参考资料 [CSS Cascading and Inheritance Level 4](https://drafts.csswg.org/css-cascade-4/#value-stages) [CSS的样式表内联外部和内部优先级？](https://www.zhihu.com/question/269658819)