padding-bottom百分比能撑出正方形，因其值按父元素宽度计算，配合height:0可形成等高空间；但需position:absolute使内容填满该区域，且aspect-ratio虽简洁却存在ios safari 15.4前兼容性问题。
直接用 padding-bottom 配合 height: 0 是最稳妥、兼容性最好的方案，现代浏览器也完全支持；aspect-ratio 虽简洁，但 iOS Safari 15.4 之前不支持，若需覆盖老设备，不能只靠它。
为什么 padding-bottom 百分比能撑出正方形
CSS 规范里明确写：padding-top 和 padding-bottom 的百分比值，是相对于父元素的 宽度 计算的，不是高度。所以当父容器设 width: 30%，再设 padding-bottom: 30%，这个内边距就会等于父宽的 30%，视觉上就“撑”出了等高的空间。
关键点在于：height: 0 必须写，否则内容（比如文字、图片）会把盒子撑高，破坏比例。
-
padding-top: 30%也能达到同样效果，但内容会从 padding 上方开始渲染，容易溢出可视区域 -
margin-bottom: 30%不行——外边距不会撑开父容器高度 - 如果父容器本身没设
width（比如display: inline-block且无宽），百分比 padding 会按 0 计算，盒子消失
实际布局中必须加 position: absolute 吗
不一定，但几乎总得加——因为 height: 0 + padding-bottom 撑出来的空间，是“不可见”的内容区，普通子元素（如 <p></p>）仍按文档流渲染，会掉到 padding 区域之外。
正确做法是让内容脱离文档流，并填满整个 padding 撑出的空间：
- 给容器设
position: relative - 给子元素设
position: absolute; top: 0; left: 0; width: 100%; height: 100% - 若子元素是
<img>，记得加display: block，否则默认 inline 会在底部留空白间隙 - 如果内容只是纯色块或背景图，甚至可以不用子元素，直接在容器上设
background和overflow: hidden
aspect-ratio: 1 / 1 能替代 padding 方案吗
能，但有明显限制：
-
aspect-ratio是基于元素自身宽高比计算，不需要父容器设宽，也不依赖height: 0或绝对定位 - 但它对内容无保护：长文本、未约束的图片仍可能撑破容器，需额外加
overflow: hidden或max-height - iOS Safari 在 15.4 版本前完全不支持，国内很多微信 WebView 仍卡在这个版本附近
- 若容器宽度由 flex/grid 决定（比如
flex: 1），aspect-ratio有时会因渲染时机问题导致短暂闪烁或错位
建议：新项目可主用 aspect-ratio，但降级兜底仍保留 padding-bottom 方案，用 @supports (aspect-ratio: 1 / 1) 包一层。
常见踩坑：图片变形、边缘露白、网格错位
这些不是写法错了，而是配套细节没处理好：
- 图片原始宽高比严重偏离 1:1 时，光靠
object-fit: cover不够，必须加overflow: hidden防边缘露出 - 多个正方形并排用
float或inline-block时，换行空格会产生 4px 左右间隙，改用display: flex或注释掉 HTML 换行更稳 - 在 Grid 布局中直接对 item 设
padding-bottom无效——Grid item 的height受 grid 容器控制，此时应优先用aspect-ratio或在 item 内再套一层容器 -
max-height对padding-bottom方案无效，因为它只约束 content box 高度；真要限制最大尺寸，得用clamp()或媒体查询配合vw
真正难的从来不是写出一个正方形，而是让它在各种嵌套、缩放、内容注入、跨端环境下始终不破形——这需要把 overflow、display、box-sizing 和定位逻辑全串起来看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
