css不知宽高正方形

CSS中，如果我们想要定义一个正方形，很多人可能会想到用width和height属性设置相等的值，如下所示：

.square {
  width: 50px;
  height: 50px;
}

然而，这种方法只适用于已知宽高的情况。如果我们不知道一个元素的宽高，但又希望它呈现为正方形，该怎么办呢？

下面介绍三种方法：

1. 用padding属性

.square {
  padding: 50%;
}

这个方法的原理是让元素的padding-top和padding-bottom属性值都等于它的宽度的一半，这样就可以保证元素呈现为正方形。但是注意，这个方法适用于元素不含内容的情况，否则内容可能会溢出。

2. 用伪元素

.square {
  position: relative;
}
.square::before {
  content: "";
  display: block;
  padding-top: 100%;
}

这个方法的原理是利用伪元素生成一个高度撑满父元素的块级元素，让它的宽度等于父元素的宽度。这样，它就和父元素一样宽，呈现为正方形。

3. 用transform属性

.square {
  width: 50%;
  transform: translateY(50%);
}

这个方法的原理是先让元素的宽度为50%，再利用transform属性把它往下平移自身高度的一半。这样，元素就呈现为正方形。

以上是三种实现正方形的方法，你可以根据具体的需求选择适合自己的方法。