标签：
最近在研究w3c的css标准规范，css2.2版本，虽然早已进入css3时代，但是css3还是继承了很多css2的基础，所以了解css2的很多标准原理，对于理解css核心内容，对写好css，写出高性能的css是很有必要的。
这篇文章写在读了css标准第六章css属性值取值过程相关内容，英文标准地址：https://www.w3.org/TR/CSS22/cascade.html
浏览器渲染页面时，解析dom树之后，一定（标准中用了must）会对每个dom元素都加上css的属性和对应的值：
“Once a user agent has parsed a document and constructed a document tree, it must assign, for every element in the tree, a value to every property that applies to the target media type.”
这里需要注意的是，每个dom的css的每个css属性都会被赋值，即便那个css属性并没有进行过任何显式设置，也会被赋予一个对应的值。
而这个对应的值，从最初赋值到最后渲染出来一共要经历四个过程，根据标准的翻译和我自己理解如下：
一，赋予指定值。（Specified values）
很容易理解，就是直接对某个css属性赋的值，就是我们写css时写的body{font-size：15px}这些。这个“指定值”又有一个规则来指定：
1.如果css样式表直接有显示的设置，就使用这个设置值；如果被设置的值是“inherit”，就使用它父元素的Computed values来做为赋予值。
2.如果没有1中的设置，inherited的属性就会它父元素的Computed values来做为赋予值。
3.既不是1也不是2（没有设置过而且属性还不能继承）的，就使用该属性的默认值作为指定值。
二，计算值。（Computed values）
从字面上可以理解就是把相对值换算成绝对值，比如ex、em换成实际的px值，相对的url转成绝对url。最重要的在于，这一步得到的Computed values，必须要是能够被子元素继承的值。
三，实际使用值（翻译的有点挫）。（Used values）
如果一个元素的宽度使用了widt:30%,这是相对于他父元素设定的，而这个值依赖于他的父元素的宽度，只有当他父元素的宽度的Computed values被设置好了之后才会来指定这个实际使用值。这里你可能会晕了，这个40%不也是相对单位么，跟二中的Computed values有什么不一样呢？不一样就在于，二中的Computed values不基于某个元素依赖，看刚才二中举的例子，ex，em都是相对于自身的font-size值进行相对设定的，不依赖于文档中的格式，所以二的Computed values肯定会发生在Used values之前。
四，实际渲染值。（Actual values）
实际渲染值是每个浏览器自己做的限制，比如设置了font-size：12.1px，实际渲染出来的还是12px，这就是Actual values。
css属性值从赋值到渲染一共经历了这四个步骤，表面看起来很简单，其实内部进行了很多的计算、赋值的过程。个人认为，了解这个过程对css的书写是有帮助的，比如，能写绝对值的时候尽量不要写相对值，能减少css计算，能进行本身样式值设置的时候不然依赖于父元素等。
标签：
原文地址：http://www.cnblogs.com/weislywang/p/5722206.html
