這篇文章主要介紹了淺談CSS中的百分比,在定義CSS樣式的時候經常會用的“%”這個長度單位，但是這個百分比到底是相對於誰的百分比呢
本文介紹了淺談CSS中的百分比，分享給大家，具體如下：
結論：
標準流中的元素，看其屬性有沒有繼承性。對於width和margin-left，它是可以繼承的，它會參照父元素或祖先元素（其實是包含塊）；對於height，它沒有繼承性，父元素或者祖先元素會自適應其所有子元素的高度和（這點是需要注意的）。
絕對定位參考的是離它最近的父元素或祖先元素，如果沒有父元素或祖先元素，那麼參照的是初始包含區塊（不同的瀏覽器可能不一樣，因為W3C沒有規定瀏覽器具體如何去實作）。但實際上，大部分瀏覽器將視覺區當作絕對定位的包含塊。
固定定位參考視覺區
#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>
<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>
當有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>以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
以上是CSS中百分比的問題解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
