CSS中实现自适应正方形的方法

使用百分比和padding

一种流行的方法是使用百分比宽度和相等的百分比padding-top来创建正方形。这种方法的关键在于，当padding值设置为百分比时，这个百分比是基于包含块的宽度计算的，而不是高度。因此，如果你设置一个元素的宽度为50%，然后将padding-top设置为50%，你就会得到一个宽度和高度都是相对于父元素宽度的50%的正方形。

square {
width: 50%;
padding-top: 50%;
background: #ccc;
}

这种方法的优点是简单易懂，不需要额外的HTML结构。缺点是，如果你需要在正方形内部放置内容，你可能需要添加额外的内部容器并使用绝对定位来放置内容。