[分享]CSS不设宽高输出正方形

在网页设计中，为了美观和布局的需要，经常需要调整元素的宽高比例。CSS中一般通过设置元素的width和height属性来实现宽高比例的控制，但是有时候我们也需要一个正方形方块，而这种元素却没有确定的...

在网页设计中，为了美观和布局的需要，经常需要调整元素的宽高比例。CSS中一般通过设置元素的width和height属性来实现宽高比例的控制，但是有时候我们也需要一个正方形方块，而这种元素却没有确定的宽高比例，那么该如何实现呢？

其实，实现这个需求十分简单，只要将高度值设置为0，或者不设置高度，然后再将padding-bottom或padding-top属性设置为一个百分比值即可。因为padding是相对于元素的宽度计算的，所以这样设置可以让元素的宽度也就是高度来决定输出的正方形的大小。

.square {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background: red;
} 

这样，我们就可以通过CSS实现一个不设宽高输出正方形的方块了。