css样式计算流程

26 阅读2分钟

计算顺序: 声明值 -> 级联值 -> 指定值 -> 计算值 -> 已用值 -> 实际值

声明值(Declared Values)

从所有匹配的元素的样式中收集原始声明会判断当前当前规则是否有效,是否有匹配的元素,在语法上是否合法

来源

  • 用户代理样式表(浏览器默认样式)
  • 用户样式表(用户自定义样式)
  • 作者样式表(网页开发者的样式)

级联(Cascaded Value)

1. 源重要性(从低到高)
  • 用户代理样式
  • 用户样式
  • 作者样式
  • 动画声明

注意!important的顺序

  • !important:作者样式
  • !important:用户样式
  • !important:用户代理样式
2. 级联层
3. 特异性(权重)
4. 出场顺序(定义顺序)

指定值(Specified Values)

确保每个属性都有值

  • 如有级联值,处理特殊关键字(inherit/initial/unset)
  • 如无级联值但属性可继承,采用继承值
  • 如无级联值且属性不可继承,采用初始值(默认值)

当显示定义的计算值: inheritinitialunset在级联后、指定值阶段前的转换过程中处理

  1. 如果属性的 级联值是  initial  关键字,则该属性的 指定值就是其 初始值 
  2. 如果属性的 级联值是  inherit  关键字,则该属性的 指定和 计算值就是 继承值 
  3. 如果一个属性的 级联值是 unset 关键字,那么如果它是一个继承属性,这将被视为  继承 ,如果它不是继承属性,这将被视为  初始 。该关键字有效地删除了 级联中先前出现的所有 声明值 ,正确地继承或不继承属性。

指定值中默认值

  • 如果级联和继承都没有产生值,则使用属性的初始值
  • 每个 CSS 属性都有在规范中定义的初始值
  • 初始值可以通过 initial 关键字显式指定

计算值(Computed Values)

将相对单位转化为绝对值

使用值(Used Values)

提取计算值并完成所有剩余计算的结果,使其成为文档格式化中使用的绝对理论值

如: 将auto转化为100px

实际值(Actual Values)