本文详细探讨了CSS中不同定位情况下，子元素宽高、margin、padding以及top、left使用百分比计算的规则，包括静态定位、相对定位、绝对定位等组合情况。
1.父元素和子元素都是static定位盒子。
1.子元素的宽高是根据父元素content的宽高计算
2.子元素的margin，padding（包括top left bottom right）的百分比根据父元素content的宽度计算
<style>
.box {
box-sizing: border-box;
/* box-sizing: content-box; */
height: 600px;
width: 800px;
padding: 100px;
background-color: brown;
}
.son {
height: 50%;
width: 50%;
padding: 20%;/* (800-200)*0.2 */
margin: 20%;
background-color: cadetblue;
}
</style>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
最低0.47元/天 解锁文章
扫一扫
2021
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
