请描述一种使用 CSS 让元素保持宽高比为 1:1 的自适应正方形的方法，并解释其原理。

回答思路

1. 【回答框架 1】使用 padding-top 或 padding-bottom 百分比技巧：因为 padding 的百分比值是相对于父元素宽度计算的，所以设置元素的宽度为一定值（如 50%），并设置 padding-bottom 为相同百分比，元素高度会由 padding 撑开，从而实现正方形。需要设置 height: 0 避免内容影响高度。
2. 【回答框架 2】使用 aspect-ratio 属性：现代浏览器支持 aspect-ratio: 1/1，直接声明宽高比，浏览器会根据宽度自动计算高度，更简洁直观。
3. 【回答框架 3】使用视口单位：设置 width: 1vw; height: 1vw 或使用 vmin，但这种方法通常用于固定屏幕比例，不够灵活。
4. 【回答框架 4】对比：padding 方法兼容性好，但需要处理内容溢出；aspect-ratio 更现代，但需要考虑浏览器兼容性；视口单位适合特定场景。
5. 【关键点 1】padding 百分比参照父元素宽度，可以实现正方形。
6. 【关键点 2】aspect-ratio: 1/1 是现代浏览器推荐方案。
7. 【关键点 3】用 padding 方法时需设置 height: 0 并处理内容定位。
8. 【易错点 1】使用 padding 方法时，若内容溢出会破坏正方形，需用 overflow: hidden 或绝对定位。
9. 【易错点 2】aspect-ratio 在旧浏览器不支持，需提供降级方案。
10. 【易错点 3】使用视口单位会受滚动条影响，导致比例不精确。