以下是三种常用的CSS实现自适应正方形元素的方法，分别基于不同的原理，可以适应不同的布局需求。
方案一：使用 padding 百分比（经典方案）
css
.square {
width: 50%; /* 父容器宽度的50% */
height: 0; /* 高度由padding撑开，必须设为0 */
padding-bottom: 50%; /* 相对于父容器的宽度，50%即为1:1 */
background: #42b983;
}
原理：
CSS 中，padding 的百分比值是相对于包含块的宽度计算的（即使是垂直方向的 padding-top/bottom 也是如此）。因此设置 padding-bottom: 50% 会让元素的高度等于父容器宽度的50%，与 width: 50% 相等，从而形成正方形。
优点：兼容性极好（IE6+ 都支持）。
缺点：元素内部如果放置内容，需要额外处理（如使用绝对定位将内容铺满），否则内容会被挤压。
方案二：使用 aspect-ratio 属性（现代方案）
css
.square {
width: 50%; /* 设定宽度为父容器的50% */
aspect-ratio: 1 / 1; /* 宽高比1:1 */
background: #42b983;
}
原理：
aspect-ratio 是 CSS 原生属性，用于定义元素的宽高比。浏览器会自动根据设定的宽度计算出等比例的高度。
优点：代码简洁直观，内部可直接放置内容，无需额外处理。
缺点：兼容性要求较高（现代浏览器均支持，IE 不支持）。如果项目需要兼容 IE，需用其他方案。
方案三：使用视口单位（vw / vh）
css
.square {
width: 20vw; /* 视口宽度的20% */
height: 20vw; /* 与宽度相同，形成正方形 */
background: #42b983;
}
原理：
vw 是相对于视口宽度的单位，vh 相对于视口高度。直接用相同数值的 vw 或 vh 即可保证宽高相等，且尺寸随视口缩放。
优点：适合需要相对于视口固定的场景（如全屏弹窗中的元素）。
缺点：尺寸始终相对于视口，无法相对于父容器，不适合需要嵌套在不定宽父容器中的场景。
方案四：使用伪元素撑开高度
css
.square {
width: 30%; /* 宽度由父容器决定 */
background: #42b983;
}
.square::before {
content: "";
display: block;
padding-top: 100%; /* 相对于父元素宽度，撑起高度 */
}
原理：
利用伪元素的 padding-top: 100% 撑开父元素的高度（同样是相对于父元素宽度计算），从而使 .square 的高度等于宽度。
优点：内部可正常放置内容（通过绝对定位将内容层叠在伪元素之上）。
缺点：需要额外处理内容定位，且伪元素会占据文档流，需配合 position: relative/absolute 使用。
方案五：使用 grid 或 flex 结合 min 函数（较少用，但可行）
css
.square {
width: min(50%, 500px); /* 宽度取50%和500px中的较小值 */
height: min(50%, 500px); /* 高度相同 */
background: #42b983;
}
原理：
利用 min() 函数让宽高同时取相同计算值，可形成正方形，但需要确保宽高的计算值相等。此方法不够灵活，通常只用于固定尺寸或比例已知的场景。
总结
- 最常用：
padding百分比（兼容性好，适合复杂布局）。 - 最简单：
aspect-ratio（现代项目首选）。 - 最适配视口：
vw/vh。 - 适合内部有内容：伪元素法 + 绝对定位内容。
根据项目兼容性要求和布局场景选择合适的方案即可。
喜欢就点个赞、转发下、收藏起来哦。谢谢支持！
