百分比 padding 合法且统一以父容器宽度为基准计算，常用于响应式宽高比；需配合 position: relative、height: 0 和绝对定位内容实现，aspect-ratio 可替代但兼容性有限。
百分比 padding 完全合法，但只认父容器宽度
可以，padding 支持百分比值，且所有方向（padding-top、padding-bottom、padding-left、padding-right）的百分比都**统一以父容器的宽度为基准计算**，和父容器高度无关。
- 父宽 400px，子元素设
padding: 10%→ 四边各 40px - 父宽 200px，子元素设
padding-top: 25%→ 实际是 50px，哪怕父高只有 80px 也不影响 - 这个行为是 CSS 规范强制定义的，不是浏览器 bug，也无需 polyfill
为什么用 padding-bottom 撑高度？
因为 padding 百分比不依赖高度，却能“占位”，所以常被用来替代 height 实现响应式宽高比。核心技巧是：让 padding-bottom “撑开”容器高度，再用绝对定位把内容塞进去。
-
padding-bottom: 56.25%对应 16:9（9 ÷ 16 = 0.5625） -
padding-bottom: 75%对应 4:3（3 ÷ 4 = 0.75） - 外层必须设
position: relative和height: 0，否则 padding 会叠加在原有高度上，比例就乱了
常见翻车现场：这些地方一写就失效
看似简单，实操中几个条件缺一不可，漏掉任意一个都会导致比例崩溃或内容消失：
- 父容器没明确
width（比如 flex 项未设flex-basis或width），百分比将基于内容宽度动态计算，结果不可控 - 内层内容没加
position: absolute，或忘了top: 0; left: 0; width: 100%; height: 100%，内容会塌陷或溢出 - 父容器本身设置了固定
height，会覆盖 padding 带来的高度，直接破坏比例 - 在某些 grid 容器中，若父项设了
align-items: start等，可能干扰子项的绝对定位定位上下文
现代替代方案：aspect-ratio 能不用百分比 padding 吗？
可以，aspect-ratio: 16 / 9 是更直观的新标准，但兼容性有缺口：Chrome 88+、Firefox 89+、Safari 15.4+ 支持，IE 和旧版 Android WebView 不支持。
立即学习“前端免费学习笔记（深入）”；
- 如果项目需兼容 iOS 15.3 及更早、或 Android 4.x 设备，百分比 padding 仍是唯一可靠选择
- 两者可共存：
aspect-ratio写在前面，百分比 padding 降级兜底，CSS 会忽略不识别的属性 - 注意：百分比 padding 方案中，
padding-bottom的值必须严格按“高÷宽”计算，小数点后两位足够，别四舍五入成 56% 或 57%
