推荐答案
使用 padding-bottom 或 padding-top 结合百分比值，以及 width: 100% 来实现自适应正方形。
<div class="square-container"> <div class="square"></div> </div>
// www.javascriptcn.com code example
.square-container {
width: 50%; /* 控制容器宽度 */
}
.square {
width: 100%; /* 宽度等于容器宽度 */
padding-bottom: 100%; /* 或 padding-top: 100%; 高度等于容器宽度 */
background-color: lightblue; /* 可选：设置背景色以观察效果 */
}或者使用aspect-ratio属性：
<div class="square"></div>
.square{
width: 50%; /* 控制宽度 */
aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */
background-color: lightblue;
}本题详细解读
原理：
padding的百分比值：padding-top和padding-bottom的百分比值是相对于父元素宽度计算的，而不是父元素高度。 这是 CSS 盒模型中一个重要的特性。width: 100%： 子元素的宽度等于父元素宽度。利用 padding 创建高度： 通过将
padding-bottom或padding-top设置为 100%，子元素的高度就会等于父元素的宽度，从而形成一个正方形。而父元素宽度会跟随屏幕自适应。aspect-ratio：aspect-ratio属性可以让我们直接声明元素的宽高比，无需借助padding，使代码更加简洁。
两种方法的比较：
padding 法： 兼容性好，几乎所有浏览器都支持，是比较传统的方案。但必须设置父容器宽度，子元素宽度设置为100%，并且必须使用
padding-top或padding-bottom来实现高度撑开。aspect-ratio 法： 代码简洁，易于理解，但浏览器兼容性不如
padding，需要较新版本的浏览器支持。使用这个属性只需要设置宽度，就可以根据宽高比进行自适应缩放。
注意事项：
- 容器宽度： 自适应正方形的宽度是由包含它的父元素宽度决定的。所以需要设置外层容器宽度，子元素
width设置为100%继承容器宽度。 - 内容溢出： 如果正方形内部有内容，可能导致内容溢出，因为
padding只是撑开盒子的高度，不会影响内容的布局。可以通过设置overflow: hidden来解决内容溢出的问题。 - 浏览器兼容性： 使用
aspect-ratio需要考虑浏览器的兼容性，对于不支持的浏览器，可以考虑使用padding的方案作为降级。可以使用 caniuse.com 查询aspect-ratio的兼容性。