css屬性的繼承、初識值、計算值、當前值、應用值

css屬性

我以爲大部分學習前端的人應該都沒有按照教科書通常的來學習css，多是相似搭積木同樣，須要什麼拿什麼，因此可能最對一些基本的概念沒有很好的理解，這裏列出的是一些css屬性的關鍵概念：

• css屬性初始值
• css屬性計算值
• css屬性應用值
• css屬性當前值
• css屬性繼承

大部分css屬性均可以有這個值：inherit 繼承父級值 ：initial 初始值，
inherit 繼承父級值

1. 對於可繼承屬性而言，直接繼承父級的屬性，直接父級元素沒有設置的話會一級級往上繼承，若是都沒有就是默認值；
2. 對於非繼承屬性而已，這個仍是要慎用，固然也能夠用，能夠繼承父級元素的屬性，可是父級元素可能沒有這個屬性，因此避免這種狀況考慮使用initial初始值比較合理

初始值

在 每一個CSS屬性 定義的概述中已經給出的 初始值 針對不一樣的 繼承或非繼承屬性 有着不一樣的含義.

對於繼承屬性, 初始值 只能 被用於沒有指定值的根元素上【由於不是根元素都會繼承其餘的父元素指定值】.

對於非繼承屬性 ,初始值能夠被用於 任意 沒有指定值的元素上.

在CSS3中容許做者使用 initial 關鍵詞明確的設定初始值.

計算值

一個CSS屬性的 計算值 (computed value) 經過如下方式從指定的值計算而來：

處理特殊的值 inherit 和 initial，以及
進行計算，以達到屬性摘要中「計算值」行中描述的值。
計算屬性的"計算值"一般包括將相對值轉換成絕對值(如 em 單位或百分比)。

例如，如一個元素的屬性值爲 font-size:16px 和 padding-top:2em, 則 padding-top 的計算值爲 32px (字體大小的2倍).

然而，有些屬性的百分比值會轉換成百分比的計算值(這些元素的百分比相對於須要佈局後才能知道的值，如 width, margin-right, text-indent, 和 top)。另外，line-height 屬性值如是沒有單位的數字，則該值就是其計算值。這些計算值中的相對值會在 應用值 肯定後轉換成絕對值。

計算值的最主要用處是 繼承 , 包括 inherit 關鍵字。

getComputedStyle() DOM API 返回的 解析值, 多是 計算值或 應用值。

應用值

CSS 屬性的應用值（used value）是完成全部計算後最終使用的值，能夠由 window.getComputedStyle 獲取。尺寸 (例如 width, line-height) 單位爲像素, 簡寫屬性 (例如 background) 與組成屬性相符 (例如 background-color，display) 與 position 、float相符，每一個 CSS 屬性都有值。

詳情

計算出CSS屬性的最終值有三個步驟。首先，指定值specified value 取自樣式層疊 (選取樣式表裏權重最高的規則), 繼承 (若是屬性能夠繼承則取父元素的值)，或者默認值。而後，按規範算出 計算值computed value (例如， span 指定 position: absolute 後display 變爲 block)。最後，計算佈局(尺寸好比 auto 或 百分數 換算爲像素值 )， 結果即 應用值used value。這些步驟是在內部完成的，腳本只能使用 window.getComputedStyle 得到最終的應用值。

舉例

沒有明確的寬度。指定的寬度: auto (默認). 計算的寬度: auto. 應用的寬度: 998px (舉例而言)。
明確的寬度: 50%. 指定的寬度: 50%. 計算的寬度: 50%. 應用的寬度: 447px
明確的寬度: inherit. 指定的寬度: 50%. 計算的寬度: 50%. 應用的寬度: 221px .

與計算值的區別

CSS 2.0 只定義了 計算值 computed value 做爲屬性計算的最後一步。 CSS 2.1 引進了定義明顯不一樣的的應用值，這樣當父元素的計算值爲百分數時子元素能夠顯式地繼承其高寬。 對於不依賴於佈局的 CSS 屬性 (例如 display, font-size, line-height)計算值與應用值同樣，不然就會不同 (引自 CSS 2.1 Changes: Specified, computed, and actual values):

實際值

一個CSS屬性的實際值（actual value）是應用值（used value）被應用後的近似值。例如，一個用戶代理可能只能渲染一個整數像素值的邊框（實際值），而且該值可能被強制近似於邊框的計算寬度值。

繼承與非繼承

每一個 CSS 屬性定義 的概述都指出了這個屬性是默認繼承的 ("Inherited: Yes") 仍是默認不繼承的 ("Inherited: no")。這決定了當你沒有爲元素的屬性指定值時該如何計算值。

繼承
當元素的一個 繼承屬性 （inherited property ）沒有指定值時，則取父元素的同屬性的 計算值 computed value 。只有文檔根元素取該屬性的概述中給定的初始值（initial value）（這裏的意思應該是在該屬性自己的定義中的默認值）。如下是繼承的一些屬性

azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing

非繼承
當元素的一個 非繼承屬性 (在Mozilla code 裏有時稱之爲 reset property ) 沒有指定值時，則取屬性的 初始值initial value （該值在該屬性的概述裏被指定）。
如下列出均爲非繼承

display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

參考：http://www.w3.org/TR/CSS21/pr...
https://developer.mozilla.org...
http://www.cnphp.info/css-sty...