css 值

CSS值的來源

首先,我們知道CSS雖然語法簡單，但也不是瞎寫的，其屬性和值都是官方定義好了的,確切的說是瀏覽器廠商定義好的。

這些給定的值無外乎來源以下情況：

1. inherit 表示從祖先元素繼承得到值。每個屬性都有。

2. initial 表示用戶代理的預設值。每個屬性都有。

3. 瀏覽器專有的值，通常有-ms-，-webkit-等前綴，也有一些值並無前綴。

4. 瀏覽器共有的值，雖然共有，但各瀏覽器在實作上不一定相同。

因此可以肯定css相容問題多來自瀏覽器廠商實作css渲染的不一致和進化程度不一造成。

CSS規範中的值

最終呈現給用戶的值經過了4步: 首先指定的值(the "specified value"), 然後是通過了繼承的值(the "computed value"), 然後轉換為使用值(the "used value"), 最後是因為瀏覽器本身限制原因而得到的實際值(the "actual value").

即指定值-->計算值-->使用值-->實際值

Specified value

指定值有3種可能，一是用戶代理的預設值即initial，一是美工寫在程式裡的值，一是顯示指定繼承的值即inherit.

通常， inherit和initial都不必顯示指定。但在某些情況下這2個值非常有用。

computed value

這是在還沒形成文檔前,渲染引擎解析css文件，透過層疊規則繼承關係計算出來的值。

used value

這是css結合html形成文件後所得到的值。

理解計算值和使用值的差別就在於 瀏覽器是先分別解析HTML和CSS文件，然後再把它們融合起來。具體可參考這2張圖。

webkit渲染流程

Geoko渲染流程

actual value

則是最後瀏覽器可用的值，比如說所有瀏覽器都不能處理小數點後7位，因此會縮小精度。

這4個值源自於規範，其他瀏覽器實作可能並不依此4步驟流程運作,但目前主流瀏覽器都是依此流程

注意 層疊不同於繼承。層疊是對單一css屬性而言，繼承則是對元素而言。層疊常伴隨著權重問題。

Chrome開發者

1. 指定值(3種)

2. 用戶代理預設值(不可更改)

3. 用戶代理預設值(不可更改)

4. 重大的給覆蓋了樣式。

5. 點選4可以跳到對應的 節點和樣式視圖。 4之下的部分錶示從哪個元素繼承了樣式，通常從這裡就可以看到元素的祖先DOM鏈.·

灰色部分

可以更改

,表示規則不可用且在運行時計算。

例子:

我現在指定h1的高度如下

查看computed value可以看到chrome保留小數點後4位:

有盒子代表形成了文檔即對應前面的used value)

最後實際值在這(直接在頁面上看):

可以看到如果有padding,padding會在形成文檔之後在形成文檔之後在形成文檔之後在顯示到瀏覽器上時加到視覺上的寬高里去。當然如果有box-sizing屬性的指定則又不一樣，但可以得知這是發生在最後一步的。

CSS值的來源

首先,我們知道CSS雖然語法簡單，但也不是瞎寫的，其屬性和值都是官方定義好了的,確切的說是瀏覽器廠商定義好的。

這些給定的值無外乎來源以下情況：

1. inherit 表示從祖先元素繼承得到值。每個屬性都有。

2. initial 表示用戶代理的預設值。每個屬性都有。

3. 瀏覽器專有的值，通常有-ms-，-webkit-等前綴，也有一些值並無前綴。

4. 瀏覽器共有的值，雖然共有，但各瀏覽器在實作上不一定相同。

因此可以肯定css相容問題多來自瀏覽器廠商實作css渲染的不一致和進化程度不一造成。

CSS規範中的值

最終呈現給用戶的值經過了4步: 首先指定的值(the "specified value"), 然後是通過了繼承的值(the "computed value"), 然後轉換為使用值(the "used value"), 最後是因為瀏覽器本身限制原因而得到的實際值(the "actual value").

即指定值-->計算值-->使用值-->實際值

Specified value

指定值有3種可能，一是用戶代理的預設值即initial，一是美工寫在程式裡的值，一是顯示指定繼承的值即inherit.

通常， inherit和initial都不必顯示指定。但在某些情況下這2個值非常有用。

computed value

這是在還沒形成文檔前,渲染引擎解析css文件，透過層疊規則繼承關係計算出來的值。

used value

這是css結合html形成文件後所得到的值。

理解計算值和使用值的差別就在於 瀏覽器是先分別解析HTML和CSS文件，然後再把它們融合起來。具體可參考這2張圖。

webkit渲染流程

Geoko渲染流程

actual value

則是最後瀏覽器可用的值，比如說所有瀏覽器都不能處理小數點後7位，因此會縮小精度。

這4個值源自於規範，其他瀏覽器實作可能並不依此4步驟流程運作,但目前主流瀏覽器都是依此流程

注意 層疊不同於繼承。層疊是對單一css屬性而言，繼承則是對元素而言。層疊常伴隨著權重問題。

Chrome開發者

1. 指定值(3種)

2. 用戶代理預設值(不可更改)

3. 用戶代理預設值(不可更改)

4. 重大的給覆蓋了樣式。

5. 點選4可以跳到對應的 節點和樣式視圖。 4之下的部分錶示從哪個元素繼承了樣式，通常從這裡就可以看到元素的祖先DOM鏈.·

灰色部分

可以更改

,表示規則不可用且在運行時計算。

例子:

我現在指定h1的高度如下

查看computed value可以看到chrome保留小數點後4位:

有盒子代表形成了文檔即對應前面的used value)

最後實際值在這(直接在頁面上看):

可以看到如果有padding,padding會在形成文檔之後在形成文檔之後在形成文檔之後在顯示到瀏覽器上時加到視覺上的寬高里去。當然如果有box-sizing屬性的指定則又不一樣，但可以得知這是發生在最後一步的。

更多css值 相關文章請關注PHP中文網！