自适应正方形-适应父节点的width

要点

padding-top等padding-*这种属性（包括margin也一样）在设置为百分比时，是会根据\color{red}{父节点的width}计算的，这一点很容易误以为是top和bottom是根据height计算。

代码

<!DOCTYPE html>
<html>
<head>
<style>
.a {
    width:  400px;
    height: 200px;
    background-color: gray;
    resize:both;
    overflow:auto;
}
.b {
    width: 50%;
    height: 0%;
    padding-bottom: 50%;
    background-color: green;
}
</style>
</head>
<body>

<div class="a">
    <div class="b"></div>
</div>

</body>
</html>

效果图

屏幕截图 2021-09-12 145121.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容