必须设 height: 0 是因为 padding-top 百分比基于父宽计算，若不设 height: 0，原有内容高度会与 padding 叠加，导致比例失真；同时需父容器有明确宽度且子元素绝对定位填充。
position 本身不负责“自适应宽高”，它只是把内容塞进一个已确定比例的空间里。真正起作用的是 padding-top 或 padding-bottom 的百分比计算逻辑——它们以父容器宽度为基准，从而让高度随宽度变化。定位只是补上最后一步：把内容精准填满这个“被 padding 撑出来的正方形空间”。
为什么必须用 position: relative + position: absolute
外层容器设 padding-top: 100% 后，高度由 padding 占位，但内容仍按正常文档流渲染，会往下挤、撑高容器，破坏比例。加 position: relative 是为了给子元素提供绝对定位的参考系；子元素再用 position: absolute 脱离文档流，才能真正贴合 padding 留出的那块正方形区域。
常见错误包括：
- 只设
position: absolute但父容器没position: relative→ 子元素可能相对于 body 定位，偏移不可控 - 子元素漏写
top: 0; left: 0; width: 100%; height: 100%→ 尺寸不填满，留白或溢出 - 子元素用了
display: inline（比如<img>默认）→ 底部留空白间隙，需加display: block
padding-top 和 padding-bottom 选哪个？
效果完全一样，都是基于父容器宽度计算。区别只在语义和容错性：
-
padding-top: 100%更直观：你想“撑高”，就用 top -
padding-bottom: 100%配合height: 0更稳妥：能彻底压制内容高度干扰，避免某些旧版浏览器对padding-top的解析偏差 - 如果容器内有文字或行内元素，
padding-bottom方案更少受line-height影响
推荐统一用 padding-bottom + height: 0 组合，兼容性和可预测性更高。
为什么不能直接写 height: 100%？
因为 height: 100% 是相对于父容器**高度**计算的，而响应式场景中，父容器高度往往未定义（比如 height: auto），结果就是 height: 100% 计算为 0，正方形直接塌陷。
而 padding-bottom: 100% 的 100% 是相对于父容器**宽度**，只要父容器有明确宽度（如 width: 100%、width: 300px 或 flex/grid 下的自动收缩），就能稳定生效。
典型失效场景：
- 父容器是
display: flex且未设width→ 子项宽度不确定，padding-bottom百分比无从计算 - 外层套了
overflow: hidden但忘了加position: relative→ 绝对定位子元素可能被裁切 - 用了
aspect-ratio: 1/1却同时写了height: 200px→ 后者直接覆盖比例逻辑
现代方案：aspect-ratio 能替代吗？
能，但有条件：aspect-ratio: 1/1 要求父容器宽度可计算，且不能有任何 height、max-height、min-height 干预。它在 Safari 15.4+、Chrome 88+、Firefox 89+ 支持良好，但 iOS 15.0–15.3 的 Safari 不支持。
如果你的项目需兼容 iOS 15.0–15.3 或更老系统，padding-bottom + absolute 仍是唯一可靠路径。别指望加个 @supports 就能无缝降级——aspect-ratio 生效时会忽略 padding 方案，但 fallback 的样式若没单独隔离，容易互相污染。
最易被忽略的一点：无论用哪种方案，**父容器必须有明确宽度**。这个“明确”，不是指“看起来有宽度”，而是 CSS 引擎能静态推导出数值——比如 width: 100% 在 flex item 中可能无效，因为 flex 容器未设主轴尺寸；又比如 width: max-content 会让 padding 百分比失去参照。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
