很多css屬性的取值都可以是百分比值。雖然形式上來說，百分比值都是數字后跟%的形式（注意數字和%之間不可以有空格），但在不同的使用場合下，其意義會有很多不同。因此，百分比值可以說包含了相當豐富的內容。
百分比值是相對值
要理解諸如100%這樣的百分比值，其關鍵點是要明白，百分比是一定有其對應的參照值的。也就是說，百分比值是一種相對值，任何時候要分析它的效果，都需要正確找到它的參照。
一個css屬性值從定義到最終實際使用，是存在一個過程的。這其中涉及到Specified Values（指定值）、Computed Values（計算值）、 Used Values（使用值）、Actual Values（實際值）等概念，可以想見到，百分比值實際會在這個過程中，根據它的參照計算轉化為一個絕對值（比如100px），然后再被應用。這就是百分比值的意義。
更多關于css屬性值的處理過程的信息，可以查看Value Processing。
百分比值的作用？
簡單地說，就是可變性。這可以衍生出自適應、響應式等看起來很有用的東西。
比如說，一個固定寬高的盒子，然后希望盒子內有一個絕對定位的，寬高和盒子一樣的蓋板（就這樣稱呼吧...），下面這樣的寫法會很合適：
這里使用百分比值的好處的是，如果需要修改盒子的尺寸，只需要修改盒子的寬高，而蓋板會自動保持和盒子的尺寸一致。
再一個例子是Bootstrap的柵格系統：
可以看到，柵格系統里會用到百分比值來實現確切的對空間的劃分。百分比值是相對的，自適應的，因此柵格系統可以很好地用于響應式設計。
可用百分比值的常見css屬性
width & height
寬和高在使用百分比值時，其參照都是元素的包含塊（Containing Block，詳情）。width參照包含塊的寬度，height參照包含塊的高度。在大部分情況下，包含塊就是父元素的內容區（盒模型里的content）。
我以前寫過width:100%; height:100%;這樣的代碼來實現尺寸和父元素一致。但我發現有時候寬度是符合意思（100%）的，但高度卻沒有效果。請看下面這個示例：
可以看到，直接父元素（包含塊）是否有明確的高度定義，會影響height為百分比值時的結果。
新聞熱點
疑難解答
