标签：实现 top padding 正方形 宽度 只用 CSS
问题描述
- 当一个div的宽度是自适应的，高度需要适配宽度的变化一起变化时，CSS的样式设置好像变得不那么容易
- 或许大多数人都会选择js实现，没问题，性能低一点罢了
- 但实际上纯css也能实现
代码
// html
<div class="container">
<div class="father">
<div class="son">test</div>
</div>
</div>
// css
.father{
width: 20%;
height: 0;
padding-top: 20%;
position: relative;
}
.son{
position: absolute;
}
- 这样就实现了，其实原理就是运用了padding和margin属性的百分比值，是相对于宽度而言的，所以设置padding-top等于宽度，height=0，就意味着用padding来做div的高度，就实现了正方形
- 当然运用这个属性，不一定是正方形，比如设置padding-top为10%，width的一半，那么就是个2:1的长方形
- 至于设置定位，是因为padding把father的内容挤下去了，用绝对定位方便子元素定位
标签：实现,
top,
padding,
正方形,
宽度,
只用,
CSS
From： https://www.cnblogs.com/mizuki-vone/p/18165384