浏览器计算CSS属性的最终值Computed value

Last Updated:

2017-12-24

首先有几个英文概念

specified value

computed value

used value

actual value

actual value是根据现实情况,最后得到的近似结果。(The actual value is the used value after any approximations have been applied) 例如: 假设浏览器只能渲染整数个像素的的边框,从而导致最后得到的整个width只能是一个近似值。 即,一个像素只能填充一个颜色。所以假设这个element,最后(以右边距为例),右边距的放置位置在第七列像素右边一点,又第八列像素不到。但事实上,第八列像素也是会被这个element占用。从而导致最后的width是一个近似值(此例中是变大了)

resolved value

4步计算得到css属性最后值

Step1 先获取 specified value

specified value是如下获得的(优先级从高到低):

  1. 最后被应用的css规则里头写到的关于这个属性的
  2. 继承(inheritence)
  3. 使用默认值

    Step2 计算computed value

    根据规范计算得到

    譬如,一个span标签,当其position被设置成absolute之后,会使得它的display属性的computed value变成 block

    Step3 layout开始代入计算,得到actual value

    layout is calculated (dimensions that are auto or percentages relative to a parent are replaced with pixel values)

    Step4 根据具体的local enviroment的限制,得到 actual value

    上述4步是在内部计算的(calculated internally).

    window.getComputedStyle。此函数返回的一般称作resolved value

    resolved value一般是computed value,也有一些历史遗留的属性的值是used value。譬如:width 和 height