有时候在写页面样式会设置百分比来控制一个元素的宽高.
我们也都知道百分比是从父元素的宽高计算而来的.
但有时候,结构写的太多了,复杂了,偶尔会出现设置百分比失效的情况.
由于界面结构太复杂了,一时半会也找不到为什么百分比会失效.
也没有总结过一些规律.所以趁着这会儿有时间,专门研究了了一下.
什么情况下会导致百分比失效的问题.
当父元素的宽高都是写死的常量时
<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
结论:
当父级元素的宽高是以常量的方式显式的写出时,设置百分比是有效的.
当父级的宽高并没有写死,而是根据内部的内容撑开时
<h3>情况二:父元素的宽高没有显式写出,而是被内容撑大,是动态的.</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
发现只有宽度有效(因为父级显式的设置了200px).
而高度无效(高度是动态的,根据内部内容撑开,而非显式写出)
结论:
当父级的某个尺寸是动态计算,或者根据内容撑开,子元素设置这个尺寸的百分比就无效.
如果子元素从直接父级拿不到显式的宽高来计算自己的百分比,它会继续往上一层去拿吗?
<h3>情况三:直接父元素找不到确定的宽高,是否继续往上一级找?</h3>
<div class="p">
<div class="c">
直接父级用内容撑开!
直接父级用内容撑开!
直接父级用内容撑开!
直接父级用内容撑开!
直接父级用内容撑开!
直接父级用内容撑开!
<div class="b"></div>
</div>
</div>
.p {
width: 200px;
height: 200px;
background: black;
}
.p .c {
width: 100%;
/* 高度不设置,用内容撑开 */
color: #fff;
background: red;
}
.p .c .b {
/* 有效 */
width: 50%;
/* 找谁拿? .p 的 200px * 0.5 吗? */
height: 100%;
background: blue;
}
image.png
发现并不会.
设置百分比,只会往上找一级,从自己的直接父元素来获取并计算.
百分比计算只涉及父子两层
设置百分比总结:
- 子元素只会从自己直接的父级找宽高数据来计算自己的百分比.
- 如果父级(非block.block宽度默认就是当前视口宽度,所以也相当于显式写出了.)没有显式的写出宽高,那么子元素计算百分比就会无效.
补充:
- 很多情况下,我们元素的宽高是不设置的,而是用内容撑开.所以,这种情况下,子元素利用百分比计算自己的高度基本是没戏的.
- 有时候,一些
block元素,在加载到页面上时,浏览器会追加默认样式display:block.所以,大多数情况下,block元素内部的子元素利用百分比计算自己的width都是有效的.之所以大多数情况下看不到,是因为此时子元素的高度为0
