inheritance initial value specified value Computed value used value
specified value
元素css属性的specified value由以下流程获得:
- 如果在样式表中为该属性显式设置了值, 那这个值就作为specified value. 例如 p { color: green; }将设置p color属性的specified value为green.
- 如果样式表中没有为该属性设置值, 如果这个属性为继承属性, 那它将以父节点的computed value作为它的specified value(根节点无父节点, 无法继承获得).
- 如果以上两条都无法得到所需的值, 那css规范确定的initial value(有的值依赖于不同浏览器)将作为该属性的specified value
inheritance
当某一元素特定css属性未设置时, 默认继承性将决定该属性的specified value:
- 继承属性 ("Inherited: Yes"): 获取父节点的computed value作为specified value, 当节点为根节点时, 使用initial value作为其specified value.
- 非继承属性("Inherited: no"): 获取该属性的initial value作为specified value
注: inherit关键字可显式指定属性通过继承方式获得specified value, 继承和非继承属性均可使用该关键字
source:
https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance?redirectlocale=en-US&redirectslug=CSS%2Finheritance
initial value
属性的initial value在css 规范中进行定义, 当属性specified value未显式设置时, initial value将作为该属性的值. 继承属性和非继承属性在initial value的使用上不同:
- 继承属性: initial value只对根节点元素有效
- 非继承属性: 对没有在样式表中设置值的属性有效, 作为其specified value.
注: css3增加了 initial 关键字, 用于显式指定属性值
source:
http://www.w3.org/TR/css3-cascade/#initial-values
Computed value
css属性的computed value通过从specified value计算得到, 计算过程将相对单位值(如em或者percentage)转换为绝对单位.
例如: 某元素的css样式{ font-size: 16px; padding-top: 2em; }, 那么对应paddin-top的computed value为32px.
对于像width, margin-right, text-indent, top这样specified value为percentage的值, 计算具体值需要依赖于布局, 他们的computed value值为对应的percentage. 同样, line-height值中没有单位的数值也直接作为computed value. 这些相对的值在计算为used value时将变为绝对单位的值.
注:
- computed value的主要作用是用于属性继承
- javascript中的getComputedStyle方法返回的是used value, 而不是computed value.
used value
在经过所有计算后得到的最终属性值即为used value. javascript中通过getComputedStyle获得对应的值. 尺寸值(如: width, line-height)全部以像素为单位, display值将与position和float属性保持协调, 所有的css属性都有一个确定的值.
详细情况
计算css属性的最终值包含三个步骤.
- 首先通过样式表, 继承, 或者默认值得到specified value.
- 然后根据规范得到computed value(例如: 设置了position: absolute属性的span元素的display将获得block作为computed value)
- 最后根据布局计算尺寸值, 这里得到的值将作为used value. 所有的计算都是系统内部进行, script脚本只能通过getComputedStyle获取最终的值.
例:
与computed value的区别
css2.0只定义了computed value作为属性值计算的最后一步. css2.1引入了used value, 这样就使得元素可以继承computed value是percentage的 width/height等属性. 对于不依赖布局的属性, computed value和used value是相同的. 以下是需要依赖布局来计算used value的属性:
- background-position
- bottom, left, right, top
- height, width
- margin-bottom, margin-left, margin-right, margin-top,
- min-height, min-width
- padding-bottom, padding-left, padding-right, padding-top
- text-indent
