要点
padding-top等padding-*这种属性（包括margin也一样）在设置为百分比时，是会根据
计算的，这一点很容易误以为是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
