本文介紹了淺談CSS中的百分比，分享給大家，具體如下：

結論：

標準流中的元素，看其屬性有沒有繼承性。對于width和margin-left，它是可以繼承的，它會參照父元素或者祖先元素（其實是包含塊）；對于height，它沒有繼承性，父元素或者祖先元素會自適應其所有子元素的高度和（這點是需要注意的）。 絕對定位參照的是離它最近的父元素或祖先元素，如果沒有父元素或祖先元素，那么參照的是初始包含塊（不同的瀏覽器可能不一樣，因為W3C沒有規定瀏覽器具體如何去實現）。但實際上，大部分瀏覽器將可視區當作絕對定位的包含塊。 固定定位參照可視區

width設置成百分比

一般子元素通常將繼承父元素計算過的值當作百分比的參照，對于不可繼承的屬性和根元素，則使用初始值作為參照

比如.box沒有設置寬度，但默認繼承了body計算過的值，又因為.box是.item的父元素，因此.item又繼承了.box計算過的值。當一個塊級元素不設置寬度時，則它的寬度默認為全屏，就是因為它繼承了包含塊的寬度。

height設置成百分比

結論

高度設置成百分比時，高度不像寬度一樣會繼承父元素或者祖先元素，相反，父元素或者祖先元素會根據子元素的實際高度（高度計算值）來自適應，一般為所有子元素的內容加起來的高度和。而子元素會根據文字行高來設置高度具體值（在子元素高度不設置具體值的情況下）。對于有absolute定位的元素，其高度為百分比時會參照父元素或祖先元素的高度，絕對定位參照的是離它最近的父元素或祖先元素，如果沒有父元素或祖先元素，那么參照的是初始包含塊（不同的瀏覽器可能不一樣，因為W3C沒有規定瀏覽器具體要如何實現）。但實際上，大部分瀏覽器將可視區當作絕對定位的包含塊。

我們一般喜歡將寬度設置成百分比，但在將高度設置成百分比的時候要注意。

html為什么會出現height等于21呢？是不是這21是從祖先元素繼承過來的？當我們把body的高度設置成100%結果還是一樣。其實這里的高度為行高的高度，也就是說，在高度為0或者不設置高度的情況下，高度是文字的行高，當我們在.box中加上line-height:20px;時，box,body和html的高度都會變成20px;當我們把.box高度設置成具體值時：