padding-top 百分比以父容器宽度为基准，非高度；配合 relative/absolute 定位使子元素填满预留空间，伪元素方案可避免内容位移，需注意 viewport 缩放、iframe 兼容性及父容器尺寸约束。
padding-top 百分比的计算基准是什么
它不是相对于父容器高度，而是父容器宽度——这是实现宽高比的关键。CSS 规范明确：padding-top 和 padding-bottom 的百分比值始终以包含块（containing block）的 宽度 为基准，哪怕你写的是“顶部内边距”。所以 padding-top: 56.25% 实际等于父宽 × 0.5625，恰好能撑出 16:9 的垂直空间。
必须配合 position: relative + absolute 才能用内容
单纯设 padding-top 只会把内容往下推，无法让子元素填满这个“预留高度”。真正做法是：父容器设 position: relative，子容器（如 video 或 div）设 position: absolute; top: 0; left: 0; width: 100%; height: 100%。这样子元素才能贴合 padding 撑出的区域。
常见错误包括：
- 忘了给父容器加
position: relative，导致子元素脱离文档流后定位失效 - 子元素没设
height: 100%，只靠top/bottom不足以撑满（尤其在 flex 或 grid 父级下更易出问题） - 父容器本身没有显式宽度（比如
width: 100%或固定值），导致百分比 padding 计算结果为 0
推荐用伪元素替代 padding-top 避免内容位移
如果容器里还有其他非绝对定位的内容（比如标题、按钮），直接用 padding-top 会让它们被顶下去，布局变复杂。更干净的做法是用 ::before 伪元素占位：
.aspect-ratio-16x9 {
position: relative;
width: 100%;
}
.aspect-ratio-16x9::before {
content: "";
display: block;
padding-top: 56.25%; /* 9/16 = 0.5625 */
}
.aspect-ratio-16x9 > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
这样 padding 完全不干扰主内容流，所有子元素统一绝对定位覆盖即可。
响应式下要注意 viewport 缩放和 iframe 兼容性
移动端 Safari 对 padding-top 百分比在缩放时偶有渲染延迟，且部分老版本 WebView（如 Android 4.x）对伪元素占位支持不稳定。若需兼容 iframe 嵌入（如 YouTube），务必确认其 allow 属性已开启 fullscreen 和 picture-in-picture，否则绝对定位可能被 iframe 的 sandbox 机制截断。
实际项目中，最常被忽略的是：没有给父容器设置 max-width 或 min-height，导致小屏下高度塌陷或大屏下拉伸失真——宽高比只是比例，最终显示效果仍取决于父级尺寸约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
