padding-bottom百分比按父容器宽度计算，非高度；需配合position: relative和absolute定位才能使内容填满撑出的空间，否则height: 100%等方案会因父高为auto而失效。
因为 padding-top 或 padding-bottom 的百分比值，始终按父容器的宽度计算，而不是高度。
padding 百分比的计算基准不是“看起来像高度”
很多人第一眼看到 padding-bottom: 56.25% 就默认它在“模拟高度”，但本质不是——CSS 规范明确要求：垂直方向的 padding 百分比，一律以包含块（即父元素）的 width 为基准。哪怕父容器高度是 0，只要它有宽度，这个 padding 就能撑出空间。
这意味着：
- 父容器
width: 320px→padding-bottom: 56.25%=180px高度 - 父容器缩到
width: 160px→ 同样规则下，padding 变成90px，宽高比仍是 16:9 - 如果误以为它基于父高计算，就会在 flex 容器或 transform 包裹的上下文中反复调试失败
为什么必须配合 position: relative + absolute？
单纯靠 padding-bottom 只是“撑高”了外层容器，但内容不会自动填满这块区域。如果不加定位约束：
立即学习“前端免费学习笔记（深入）”；
- 子元素用
height: 100%→ 父高是 auto，计算结果为 0，内容消失 - 子元素用
margin或flex居中 → 无法锚定到 padding 撑出的实际高度边界 - 只有
position: absolute能无视文档流，直接贴合到top: 0; bottom: 0形成的矩形区域
所以标准结构里 position: relative 不是可选项，它是让 absolute 子元素有参照系的必要前提。
常见失效场景：父容器偷偷改了宽度基准
写对了 padding-bottom 和定位，却还是比例错乱？大概率是上级容器干扰了宽度继承：
- Vue / React 组件里父级设了
flex: 1，但没配min-width: 0→ flex 项收缩导致宽度基准丢失 - CMS 渲染的卡片加了
height: 100%→ 直接压制 padding 撑高的行为 - 微信 X5 内核中父容器套了
transform→ 必须加will-change: transform才能正确触发重绘 - Grid 布局中列轨道写成
grid-template-columns: auto→ 列宽不确定，padding 计算失去依据
真正卡住人的从来不是公式算错，而是 inspect 时没往下点开父级的 computed styles 看一眼实际 width 是多少。
