CSS屬性中常常出現的百分比

起源：一道面試題（貓眼電影）

問題：css中的單位都有哪些？能夠取百分數的單位有哪些？其中margin-top取百分數時是相對於誰來計算的？

回答：

（1）css中的單位：CSS規定了兩種類型的單位，一種是絕對單位，另外一種是與其餘屬性掛鉤的相對單位。

絕對單位：in-英寸；cm；mm；pt-磅；pc-pica
相對單位：em-與元素字號掛鉤；ex-與元素字體的「x高度」掛鉤；rem-與根元素字號掛鉤；px-與CSS像素掛鉤；%-另外一屬性值的百分比。

（2）CSS中能夠取百分比的樣式單位

1. 定位：top,right,bottom,left;

2. 盒模型：width,height,margin,padding;

3. 背景：backgroud-position,background-size;

4. 文本：text-indent;

5. 字體：font-size;

（3）margin-top是相對於父級元素的width屬性（不是height屬性）來計算的。

總結：CSS中屬性取值百分比

1.百分比單位

• 基於包含塊的寬度來計算的屬性：margin，padding，width，max-width，min-width，left，right，text-indent.

注意

1.margin-top，margin-bottom，padding-top和padding-bottom都是基於包含塊的width屬性來計算的。
2.text-indent：定義基於父元素寬度的百分比的縮進。當外層不指定寬度時，ie下會基於瀏覽器寬度。

• 基於包含塊的高度來計算的屬性：top，bottom，height，max-height，min-height

注意

關於包含塊（containing block）的概念，不能簡單地理解成是父元素。若是是靜態定位和相對定位，包含塊通常就是其父元素。可是對於絕對定位的元素，包含塊應該是離它最近的 position 爲 absolute、relative、或者 fixed 的祖先元素。對固定定位的元素，它的包含塊是視口（viewport）。

• 基於當前字體大小來計算的屬性：line-height

關於line-heigt的詳細解釋，請移步這裏css行高line-height的用法與計算原理

• 基於line-height來計算的屬性：vertical-align

• background-position：背景圖像的位置，分別設置水平方向和垂直方向上的兩個值，若是使用百分比，那麼百分比值會同時應用於元素和圖像。例如 50% 50% 會把圖片的（50%, 50%）這一點與框的（50%, 50%）處對齊，至關於設置了 center center。同理 0% 0% 至關於 left top，100% 100% 至關於 right bottom。

• backgroud-size:設置背景圖像的大小。兼容IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 屬性。 以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。若是隻設置一個值，則第二個值會被設置爲 「auto」。

注意

background-size還能夠取預約義的值：contain，cover，auto。

2.百分比繼承

若是某個元素設置了百分比的屬性，則後代元素繼承的是計算後的值。例如：

p { font-size: 10px } p { line-height: 120% } / 120% of 'font-size' / 那麼p的子元素繼承到的值是 line-height: 12px，而不是 line-height: 120%。

補充：

關於css中的繼承：

• 樣式層疊與繼承是樣式表中兩個關鍵概念，瀏覽器會根據層疊和繼承規則肯定顯示一個元素時各類樣式屬性採用的值。

• 並不是全部的CSS屬性均可以繼承，這這方面有條經驗能夠參考：與元素外觀（文字，顏色，字體等）相關的樣式會被繼承；與元素在頁面上的佈局相關的樣式不會繼承。此外，還能夠使用inherit強行實施繼承。

參考

1.HTML5權威教程（4.2.3節）
2.css樣式能夠使用百分比的屬性--總結
3.淺析CSS 屬性之中常常出現的百分比