css - 有关width，height，padding，margin。和%值的关系
本文介绍了css - 有关width，height，padding，margin。和%值的关系的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
解决方案
意思就是根据它父级容器的宽高来计算的，口说无凭，代码为证。
HTML:
<div id="p1">
<div class="child">
</div>
</div>
<div id="p2">
<div class="child">
</div>
</div>style:
#p1 {
width: 50px;
height: 50px;
background: red
}
#p2 {
width: 100px;
height: 100px;
background: blue
}
.child {
width: 50%;
height: 50%;
background: yellowgreen
}截图：
结论：
同样是 class="child" 的 div，分布根据了父级的宽高计算的自身的宽高，这就是 %
补充：
HTML:
<body>
<div id="p1">
<div class="child"></div>
</div>
</body>CSS:
#p1 {
width: 200px;
height: 400px;
background: red
}
.child {
height: 50%;
margin: 10% 10%;
padding: 10% 10%;
}截图：
子元素 padding和margin的上下左右的数值都是根据父级的宽度算出的，而高度是父级的高度算出的。
这篇关于css - 有关width，height，padding，margin。和%值的关系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
