padding-bottom百分比能稳定实现响应式宽高比，因其基于父容器宽度计算，可精准推导高度；而height:56.25%依赖父高度（常为0）导致塌陷和布局抖动，必须配合position:relative与absolute定位才能正确填充。
因为 padding-top 和 padding-bottom 的百分比值始终按父容器的 width 计算，而非高度——这个“反直觉但稳定”的行为，恰好能用宽度推导出固定宽高比所需的高度。
为什么不用 height: X%？
直接写 height: 56.25% 通常无效：它依赖父元素有明确高度，而多数响应式容器高度由内容撑开，形成循环依赖。结果就是容器塌陷，图片加载后突然下压页面（布局抖动）。
-
padding-bottom: 56.25%不依赖父高度，只要父容器有确定的width（比如width: 100%或具体像素值），就能稳定“撑出” 16:9 所需的高度空间 - 该行为是 CSS 规范明确定义的，在 IE8+ 及所有现代浏览器中一致生效，无需 polyfill
- 它不缩放内容本身，只预留比例正确的空白区域，为后续绝对定位的内容提供可靠容器
必须配合 position: relative + absolute 吗？
是的，且顺序和写法不能错。
- 外层容器必须设
position: relative，否则内层position: absolute会相对于更上层定位祖先，导致错位 - 内层内容（如
<img>）不能靠height: 100%填满——父容器没有height，只有padding撑高，100%高度计算失败 - 正确做法是让内层元素
position: absolute并四边归零：top: 0; left: 0; right: 0; bottom: 0 - 对
<img>还要加display: block消除默认inline行内基线干扰
常见宽高比对应值和易错点
数值必须精确，四舍五入会偏移：
- 16:9 →
padding-bottom: 56.25%（不是 56%） - 4:3 →
padding-bottom: 75% - 1:1 →
padding-bottom: 100% - 3:2 →
padding-bottom: 66.666666%（或写66.67%，但别用66%） - 错误地在
<img>自身上写padding-bottom：替换元素（replaced element）对padding的渲染不可靠，且不会触发高度预留
真正难的不是算出那个百分比，而是记住：它只在父容器有明确宽度时才起效，且必须用相对/绝对定位解耦内容填充逻辑——漏掉任一环，整个结构就塌了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
