元素竖向的百分比设定是相对于容器的高度吗?

这是我之前遇到的一个面试题,经过一番验证,发现无论回答“是”or "否"都不太准确

1、竖向百分比 ——之height

.con{
200px;
height: 100px;
background: gray;
margin-left: 200px;
}
p{
/*margin-top: 20%;*/
background: cornflowerblue;
height: 50%;
}

<div class="con">
<p>这是测试的内容!</p>
</div>


可见对于height属性取值百分比,是现对于容器高度的

2、竖向百分比——之 间距

对于margin-top、margin-bottom、padding-top、padding-bottom这些竖直方向的内外边距属性的百分比取值,

参考的其实是容器的宽度而不是高低。

p{
margin-top: 20%;
background: cornflowerblue;
/*height: 50%;*/
}

原文地址:https://www.cnblogs.com/loushiqiang/p/6738241.html