有時候在寫頁面樣式會設(shè)置百分比來控制一個元素的寬高.
我們也都知道百分比是從父元素的寬高計算而來的.
但有時候,結(jié)構(gòu)寫的太多了,復(fù)雜了,偶爾會出現(xiàn)設(shè)置百分比失效的情況.
由于界面結(jié)構(gòu)太復(fù)雜了,一時半會也找不到為什么百分比會失效.
也沒有總結(jié)過一些規(guī)律.所以趁著這會兒有時間,專門研究了了一下.
什么情況下會導(dǎo)致百分比失效的問題.
當(dāng)父元素的寬高都是寫死的常量時
<h3>情況一:父元素的高度寬度顯式寫出</h3>
<div class="parent">
<div class="child"></div>
</div>
.parent {
/* w & h 顯式寫出了 */
width: 200px;
height: 200px;
background: yellow;
}
.parent .child {
width: 50%;
height: 50%;
background-color: black;
}
image.png
結(jié)論:
當(dāng)父級元素的寬高是以常量的方式顯式的寫出時,設(shè)置百分比是有效的.
當(dāng)父級的寬高并沒有寫死,而是根據(jù)內(nèi)部的內(nèi)容撐開時
<h3>情況二:父元素的寬高沒有顯式寫出,而是被內(nèi)容撐大,是動態(tài)的.</h3>
<div class="parent1">
adjlsaj
asdlsajdjsald
AAAAAA
<div class="child1"></div>
</div>
.parent1 {
width: 200px;
background: black;
color: #fff;
font-size: 50px;
word-wrap:break-word;
}
.parent1 .child1 {
/* 有效 */
width: 100%;
/* 無效 */
height: 50%;
background-color: pink;
opacity: 0.3;
}
image.png
發(fā)現(xiàn)只有寬度有效(因為父級顯式的設(shè)置了200px).
而高度無效(高度是動態(tài)的,根據(jù)內(nèi)部內(nèi)容撐開,而非顯式寫出)
結(jié)論:
當(dāng)父級的某個尺寸是動態(tài)計算,或者根據(jù)內(nèi)容撐開,子元素設(shè)置這個尺寸的百分比就無效.
如果子元素從直接父級拿不到顯式的寬高來計算自己的百分比,它會繼續(xù)往上一層去拿嗎?
<h3>情況三:直接父元素找不到確定的寬高,是否繼續(xù)往上一級找?</h3>
<div class="p">
<div class="c">
直接父級用內(nèi)容撐開!
直接父級用內(nèi)容撐開!
直接父級用內(nèi)容撐開!
直接父級用內(nèi)容撐開!
直接父級用內(nèi)容撐開!
直接父級用內(nèi)容撐開!
<div class="b"></div>
</div>
</div>
.p {
width: 200px;
height: 200px;
background: black;
}
.p .c {
width: 100%;
/* 高度不設(shè)置,用內(nèi)容撐開 */
color: #fff;
background: red;
}
.p .c .b {
/* 有效 */
width: 50%;
/* 找誰拿? .p 的 200px * 0.5 嗎? */
height: 100%;
background: blue;
}
image.png
發(fā)現(xiàn)并不會.
設(shè)置百分比,只會往上找一級,從自己的直接父元素來獲取并計算.
百分比計算只涉及父子兩層
設(shè)置百分比總結(jié):
- 子元素只會從自己直接的父級找寬高數(shù)據(jù)來計算自己的百分比.
- 如果父級(非block.block寬度默認(rèn)就是當(dāng)前視口寬度,所以也相當(dāng)于顯式寫出了.)沒有顯式的寫出寬高,那么子元素計算百分比就會無效.
補(bǔ)充:
- 很多情況下,我們元素的寬高是不設(shè)置的,而是用內(nèi)容撐開.所以,這種情況下,子元素利用百分比計算自己的高度基本是沒戲的.
- 有時候,一些
block元素,在加載到頁面上時,瀏覽器會追加默認(rèn)樣式display:block.所以,大多數(shù)情況下,block元素內(nèi)部的子元素利用百分比計算自己的width都是有效的.之所以大多數(shù)情況下看不到,是因為此時子元素的高度為0
