只用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的内容挤下去了，用绝对定位方便子元素定位