CSS中百分比的問題解析

這篇文章主要介紹了淺談CSS中的百分比,在定義CSS樣式的時候經常會用的 “%”這個長度單位，但是這個百分比到底是相對於誰的百分比呢

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

結論：

1. 標準流中的元素，看其屬性有沒有繼承性。對於width和margin-left，它是可以繼承的，它會參照父元素或者祖先元素（其實是包含塊）；對於height，它沒有繼承性，父元素或者祖先元素會自適應其所有子項目的高度和（這點是需要注意的）。

2. 絕對位置參照的是離它最近的父元素或祖先元素，如果沒有父元素或祖先元素，那麼參照的是初始包含塊（不同的瀏覽器可能不一樣，因為W3C沒有規定瀏覽器具體如何去實現）。但實際上，大部分瀏覽器將可視區當作絕對位置的包含塊。

3. 固定定位參照可視區

width設定成百分比

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

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

height設定成百分比

結論

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

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

 <style>        body,p{            margin:0;            padding：0；        }        .box{            width:100px;            height:100%;            background-color: #58d3e2;        }    </style><p class="box">height 100%</p>

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

 <style>        body,p{            margin:0;            padding：0；        }        .box{            width:100px;            height:100px;            background-color: #58d3e2;        }    </style><p class="box">height 100%</p>

可以發現，body和html竟然跟.box高度一樣為100px.所以可以得出父元素在不設定高度的情況下，是自適應子項目高度的（在不設定高度的情況下，html和body的高度是所有內容加起來的高度），如果父元素設定了高度，則是另外一種情況了:

 <style>        body,p{            margin:0;            padding:0;        }        .d{            height: 100px;            width: 200px;            background-color: #9d9d9d;        }        .box{            width:100px;            height:100px;            background-color: #58d3e2;        }    </style><p class="d"><p class="box">height</p></p>

可以發現d,body,html的高度都變成了100px(本來應該是200px),說明父元素或祖先元素時被動自適應子項目高度的，它們的高度值不會繼承給自元素。

當有absolute定位時

1.絕對位置沒有定位的祖先元素

這時絕對位置參照的是一個視口的高度，注意視口這個概念。

 <style>        body,p{            margin:0;            padding：0；        }        .box{            position：absolute;            width:100px;            height:100%;//改變百分比為50%            background-color: #58d3e2;        }    </style><p class="box">height 100%</p>

改變height分別為100%和50%，可以發現html的高度為0，並沒有自適應p的高度，因為p已經徹底脫離標準流了，我們說過，如果絕對位置沒有定位的祖先元素，則包含塊為初始包含塊，這裡的初始包含塊即為可視區，所以這裡的百分比是參照可視區的大小來計算的。所以為50%時占視口的一半。注意這隻是一個視口的高度，把捲軸往下拉拉就知道了。

2.絕對位置的元素在另外一個定位元素裡面（除static外）

這時百分比參照的是父元素產生的包含塊計算出來的值

所以想讓定位元素的高度佔滿整個螢幕，可以：

body{  position:relative;}

margin-left設定成百分比

  <style>        body,p{            margin:0;            padding：0；        }        .box{            position:absolute;            width:100px;            height:100px;            margin-left: 100%;            background-color: #58d3e2;        }    </style><p class="box">margin-left</p>

這時出現了捲軸，這是因為將p的margin-left設定成了100%，而百分比是參照其包含塊body的寬度，body又是參照的html（某些瀏覽器將它當作初始包含塊）。而html的初始包含塊是可視區，所以可視區的寬度再加上元素的100%，自然就超出了螢幕了。

解決方案：

（1）利用calc函數

<style>        body,p{            margin:0;            padding：0；        }        .box{            position:absolute;            width:100px;            height:100px;            margin-left: calc(100%-100px);            background-color: #58d3e2;        }    </style><p class="box">margin-left</p>

（2）讓body的寬度減去100px,因為p的百分比是參照其父元素的寬度計算的，因此這裡將它的父元素的寬度減小，那麼它的margin-left的100%自然就小了

<style>        body,p{            margin:0;            padding：0；        }         body{             margin-right；100px;        }        .box{            position:absolute;            width:100px;            height:100px;            margin-left: 100%;            background-color: #58d3e2;        }    </style><p class="box">margin-left</p>

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！