面试题：如何用 CSS 实现一个宽高自适应的正方形？

要使用 CSS 实现一个宽高自适应的正方形，可以利用多种方法。这里介绍几种常见的实现方式：

方法一：使用 padding-top 或 padding-bottom

这种方法利用了 padding 百分比值是相对于包含块的宽度这一特性。

.square {
    width: 100%; /* 或者具体的宽度，比如50% */
    height: 0;
    padding-top: 100%; /* 使元素的高度与宽度相同 */
}

解释：

• width 设置为父元素宽度的百分比（也可以是固定值）。
• height 被设置为 0，因为我们将使用 padding-top 来确定高度。
• padding-top 的值为 100%，这意味着它的尺寸将是其包含块宽度的 100%，从而创建了一个正方形。

方法二：使用 aspect-ratio

对于支持 aspect-ratio 属性的现代浏览器，可以通过直接指定宽高比来创建正方形。

.square {
    width: 100%; /* 或者具体的宽度，比如50% */
    aspect-ratio: 1 / 1; /* 宽高比为1:1，形成正方形 */
}

注意： 这种方法需要浏览器支持 aspect-ratio 属性，因此在一些旧版浏览器中可能不适用。

方法三：使用伪元素和相对定位

这种方法通过向元素添加一个伪元素，并使用相对定位来确保内容不会被影响。

.square {
    position: relative;
    width: 100%; /* 可以根据需求调整 */
    height: auto;
}

.square::before {
    content: "";
    display: block;
    padding-top: 100%; /* 创建一个正方形 */
}

/* 如果需要在正方形内部放置内容 */
.square > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

解释：

• 使用伪元素 ::before 来创建一个具有 padding-top: 100% 的块，这将强制该元素成为正方形。
• 将实际内容绝对定位到这个伪元素内，使得内容可以根据需要在正方形内部居中或对齐。

以上三种方法都可以实现宽高自适应的正方形效果，具体选择哪种方法取决于你的项目需求以及目标浏览器的支持情况。对于现代浏览器，推荐使用 aspect-ratio，因为它更加直观且易于理解。如果需要兼容性更广泛的解决方案，则可以考虑其他两种方法。