padding-top百分比按父宽计算，可锁住宽高比；需配合position:relative和absolute子元素；aspect-ratio兼容性差，padding方案仍不可替代。
为什么 padding-top 百分比能锁住宽高比
因为 padding-top 的百分比值不是按父元素高度算的，而是按父元素宽度算的——这个反直觉特性恰恰是实现响应式比例盒子的关键。浏览器对 height: 56.25% 这类写法会直接忽略（解析为 0），但 padding-top: 56.25% 却能稳定生效，靠的就是这个计算基准差异。
常见错误现象包括：容器高度塌陷、子元素被拉伸、视频/图片显示不全。根本原因往往是没理解这个“全看父宽”的规则，误以为上下 padding 参照的是高度。
必须写的三行核心 CSS
一个能跑通的 16:9 响应式盒子，最少只需这三段声明：
.ratio-box { position: relative; width: 100%; padding-top: 56.25%; }.ratio-box > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }-
* { box-sizing: border-box; }（全局重置，避免 padding/border 溢出）
注意：padding-top 值 = 高 ÷ 宽 × 100，16:9 是 9/16*100 = 56.25，4:3 是 75，1:1 是 100。不要用 padding-bottom 替代 padding-top —— 虽然效果一样，但语义和可维护性差，且部分旧版 Safari 对 padding-bottom 在绝对定位上下文中有渲染偏差。
子元素必须用 absolute 填满，不能用 flex 或 grid
用 display: flex 或 grid 布局子内容会导致高度计算失效，因为它们依赖父容器的显式高度，而这里父容器高度是靠 padding-top “撑”出来的，本身没有 height 值。
正确做法是让子元素脱离文档流，用 position: absolute 精确贴边。如果子元素是 <iframe></iframe> 或 <video></video>，直接加在 .ratio-box 里就行；如果是多层嵌套（比如 <div><video></video></div>），记得把 > * 改成 > div > * 或具体选择器，否则中间层会漏掉。
容易踩的坑：
- 忘了给父容器设
position: relative，导致absolute子元素相对于 body 定位 - 子元素写了
margin或padding，又没配box-sizing: border-box，造成尺寸溢出 - 在媒体查询里改
padding-top值试图适配不同断点——没必要，百分比本就是响应式的，改了反而破坏比例一致性
aspect-ratio 出来了，但还不能完全替代 padding 方案
aspect-ratio: 16/9 确实更直观，但它在 Safari 15.4 以下、Firefox 89 以下、所有 IE 中都不支持。如果你的项目要兼容老版本 iOS 或企业内网环境，padding-top 仍是唯一可靠方案。
另外，aspect-ratio 对 position: absolute 子元素的约束力弱于 padding 方案——它只控制容器自身宽高比，不自动提供“内部填满”的定位上下文。你仍得手动加 position: relative 和子元素 absolute，等于多写一遍逻辑。
真正容易被忽略的一点：当盒子内需要居中文字或按钮时，别在 absolute 子元素上用 text-align: center 就完事——它的宽高是 100%，但内容流仍按块级默认行为排布。加 display: flex; align-items: center; justify-content: center; 才稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
