只用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的内容挤下去了,用绝对定位方便子元素定位
posted @ 2024-04-29 11:57  Mizuki-Vone  阅读(74)  评论(0)    收藏  举报