本文介紹了淺談CSS中的百分比，分享給大家，具體如下：
結論：
width設置成百分比
一般子元素通常將繼承父元素計算過的值當作百分比的參照，對于不可繼承的屬性和根元素，則使用初始值作為參照
比如.box沒有設置寬度，但默認繼承了body計算過的值，又因為.box是.item的父元素，因此.item又繼承了.box計算過的值。當一個塊級元素不設置寬度時，則它的寬度默認為全屏，就是因為它繼承了包含塊的寬度。
height設置成百分比
結論
高度設置成百分比時，高度不像寬度一樣會繼承父元素或者祖先元素，相反，父元素或者祖先元素會根據子元素的實際高度（高度計算值）來自適應，一般為所有子元素的內容加起來的高度和。而子元素會根據文字行高來設置高度具體值（在子元素高度不設置具體值的情況下）。對于有absolute定位的元素，其高度為百分比時會參照父元素或祖先元素的高度，絕對定位參照的是離它最近的父元素或祖先元素，如果沒有父元素或祖先元素，那么參照的是初始包含塊（不同的瀏覽器可能不一樣，因為W3C沒有規定瀏覽器具體要如何實現）。但實際上，大部分瀏覽器將可視區當作絕對定位的包含塊。
我們一般喜歡將寬度設置成百分比，但在將高度設置成百分比的時候要注意。
<style> body,div{ margin:0; padding：0； } .box{ width:100px; height:100%; background-color: #58d3e2; } </style><div class="box">height 100%</div>
html為什么會出現height等于21呢？是不是這21是從祖先元素繼承過來的？當我們把body的高度設置成100%結果還是一樣。其實這里的高度為行高的高度，也就是說，在高度為0或者不設置高度的情況下，高度是文字的行高，當我們在.box中加上line-height:20px;時，box,body和html的高度都會變成20px;當我們把.box高度設置成具體值時：
<style> body,div{ margin:0; padding：0； } .box{ width:100px; height:100px; background-color: #58d3e2; } </style><div class="box">height 100%</div>
可以發現，body和html竟然跟.box高度一樣為100px.所以可以得出父元素在不設置高度的情況下，是自適應子元素高度的（在不設置高度的情況下，html和body的高度是所有內容加起來的高度），如果父元素設置了高度，則是另外一種情況了:
<style> body,div{ margin:0; padding:0; } .d{ height: 100px; width: 200px; background-color: #9d9d9d; } .box{ width:100px; height:100px; background-color: #58d3e2; } </style><div class="d"><div class="box">height</div></div>
可以發現d,body,html的高度都變成了100px(本來應該是200px),說明父元素或祖先元素時被動自適應子元素高度的，它們的高度值不會繼承給自元素。
當有absolute定位時
1.絕對定位沒有定位的祖先元素
這時絕對定位參照的是一個視口的高度，注意視口這個概念。
<style> body,div{ margin:0; padding：0； } .box{ position：absolute; width:100px; height:100%;//改變百分比為50% background-color: #58d3e2; } </style><div class="box">height 100%</div>
改變height分別為100%和50%，可以發現html的高度為0，并沒有自適應div的高度，因為div已經徹底脫離標準流了，我們說過，如果絕對定位沒有定位的祖先元素，則包含塊為初始包含塊，這里的初始包含塊即為可視區，所以這里的百分比是參照可視區的大小來計算的。所以為50%時占視口的一半。注意這只是一個視口的高度，把滾動條往下拉拉就知道了。
2.絕對定位的元素在另外一個定位元素里面（除static外）
這時百分比參照的是父元素生成的包含塊計算出來的值
所以想讓定位元素的高度占滿整個屏幕，可以：
body{ position:relative;}margin-left設置成百分比
<style> body,div{ margin:0; padding：0； } .box{ position:absolute; width:100px; height:100px; margin-left: 100%; background-color: #58d3e2; } </style><div class="box">margin-left</div>
這時出現了滾動條，這是因為將div的margin-left設置成了100%，而百分比是參照其包含塊body的寬度，body又是參照的html（某些瀏覽器將它當作初始包含塊）。而html的初始包含塊是可視區，所以可視區的寬度再加上元素的100%，自然就超出了屏幕了。
解決方法：
（1）利用calc函數
<style> body,div{ margin:0; padding：0； } .box{ position:absolute; width:100px; height:100px; margin-left: calc(100%-100px); background-color: #58d3e2; } </style><div class="box">margin-left</div>（2）讓body的寬度減去100px,因為div的百分比是參照其父元素的寬度計算的，因此這里將它的父元素的寬度減小，那么它的margin-left的100%自然就小了
<style> body,div{ margin:0; padding：0； } body{ margin-right；100px; } .box{ position:absolute; width:100px; height:100px; margin-left: 100%; background-color: #58d3e2; } </style><div class="box">margin-left</div>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
