429
w3c係列之CSS（三）：CSS屬性是如何被應用到元素上的
w3c上第五章是講CSS選擇器的，可以去看精通CSS係列之選擇器。本文講的是第六章(Assigning property values, Cascading, and Inheritance)。
當瀏覽器為獲取到的網頁文檔生成了document tree時，接下來要做的就是為每一個元素應用樣式了。
瀏覽器在計算樣式值的時候一般會經過以下四步計算：
STEP1.優先使用指定屬性值(the "specified value")
首先使用指定的值(the "specified value")，比如下麵這段文檔中p的font-size為例：
<body>
<p>hello</p>
</body>使用指定值時瀏覽器會遵循以下機製：
1.如果能通過層疊規則得到font-size的值，就直接用該值。顯然上麵沒有任何CSS代碼，所以無法利用cascade層疊規則；
2.如果沒有指定，而且該屬性可以繼承，並且該元素不是文檔樹的根元素，那麼就使用從父元素那邊繼承下來的值（這時候的值不叫"specified value"了，而是"computed value"）。顯然，font-size屬性可以繼承，並且p元素也不是文檔樹的根元素，但是p的父元素也沒有指定值啊！這沒法計算啊！
3.如果上麵的條件都不滿足，就使用屬性的初始值。屬性的初始值在屬性定義的時候就給出了。font-size的默認值為medium，所以這裏的hello字體大小應該為medium。不過這個medium到底是多大啊？個人認為應該就是UA設置的默認字體大小。理由：chrome中默認字體16px，而font-size:medium和font-size：16px效果完全相同。
STEP2.使用計算值 (the "computed value")
每個元素都應該有確定的屬性，如果沒有指定屬性值，那麼就隻有按照一定的規則來計算出來值了。這種規則就是基於繼承的規則。比如設置body{font-size:0.104in;},那麼p的font-size經過計算也是0.104in。所以隻要不是直接指定元素的屬性值，都會使用到計算值。
這裏就有個疑問了：上麵的font-size:medium其實也沒有具體的，最終結果呈現為font-size:16px是不是也是經過計算的呢？個人認為這應該算是瀏覽器內部設置的默認樣式，並不算是一種計算值。
STEP3.得到使用值(the "used value")
由於使用媒體的不同，計算後的值通常要轉成適用於目標媒體的“絕對值”，使之能用確實地在目標媒體上使用，我們稱之為“used value”。比如要在屏幕上顯示0.104in，因為現在的電腦屏幕都是按像素尺寸算的，所以需要將in轉化為px才能顯示（由於不同屏幕的ppi不同， 所以最終看到的長度有可能不一樣）。
0.104in大概等於10px，所以得到的使用值為10px。
使用值就是完成計算值以及確定相關依賴之後得到的適用於目標媒體的值。完成計算值不用說了，那什麼叫做確定相關依賴呢？比如你設置一個box的高度為50%，那麼這個值隻有在其父元素的高度確定之後才能計算，這就是相關依賴。
STEP4.根據實際環境應用實際值(the "actual value")
最後更新：2017-04-03 05:40:06