inheritance initial value specified value Computed value used value

specified value

　　元素css属性的specified value由以下流程获得:

1. 如果在样式表中为该属性显式设置了值,   那这个值就作为specified value.   例如 p { color: green; }将设置p color属性的specified value为green.
2. 如果样式表中没有为该属性设置值,   如果这个属性为继承属性, 那它将以父节点的computed value作为它的specified value(根节点无父节点,   无法继承获得).
3. 如果以上两条都无法得到所需的值,   那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

https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value?redirectlocale=en-US&redirectslug=CSS%2Finitial_value

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.

source: https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value?redirectlocale=en-US&redirectslug=CSS%2Fcomputed_value

used value

　　在经过所有计算后得到的最终属性值即为used value.   javascript中通过getComputedStyle获得对应的值.   尺寸值(如: width, line-height)全部以像素为单位,    display值将与position和float属性保持协调,   所有的css属性都有一个确定的值.

详细情况

　　计算css属性的最终值包含三个步骤.  

1. 首先通过样式表,   继承,   或者默认值得到specified value.
2. 然后根据规范得到computed value(例如: 设置了position: absolute属性的span元素的display将获得block作为computed value)
3. 最后根据布局计算尺寸值,   这里得到的值将作为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

https://developer.mozilla.org/en-US/docs/Web/CSS/used_value?redirectlocale=en-US&redirectslug=CSS%2Fused_value