padding-top百分比能固定宽高比，因其值按包含块宽度计算，配合absolute定位子元素可实现响应式比例布局；4:3为75%，16:9为56.25%，兼容性优于aspect-ratio。
padding-top 百分比为什么能固定宽高比
因为 padding-top（和 padding-bottom）的百分比值，是相对于**包含块的宽度**计算的，不是高度。这个特性被借用来“骗”出固定比例——你把高度交给 padding 去撑，内容区域再用 position: absolute 填满它。
常见错误现象：height: 50% 不生效、盒子塌陷、子元素溢出或错位。
- 必须给父容器设
position: relative，否则absolute子元素会往上层找定位上下文 - 子内容容器要设
position: absolute; top: 0; left: 0; width: 100%; height: 100%，否则 padding 留下的空白就空着了 - 如果父容器宽度动态变化（比如响应式），比例依然成立；但若父容器宽为
0（如未设置宽、又没内容撑开），padding 计算结果就是 0
4:3 和 16:9 的 padding-top 值怎么算
公式就是： padding-top = (height / width) * 100%。别背数字，现场算更稳。
使用场景：视频容器、卡片封面图、响应式图表占位、iframe 包裹器。
- 4:3 →
padding-top: 75%（3 ÷ 4 = 0.75） - 16:9 →
padding-top: 56.25%（9 ÷ 16 = 0.5625） - 1:1 →
padding-top: 100% - 如果要 2:1 横幅，就是
padding-top: 50%
为什么不用 aspect-ratio？兼容性怎么看
aspect-ratio 是新标准，写起来确实干净：aspect-ratio: 16 / 9。但它在 Safari 15.4 之前不支持，在旧版 iOS WebView 和部分安卓浏览器里直接失效。
性能影响几乎可忽略，但兼容性落差大：
- 现代 Chrome/Firefox/Edge（≈2021 年后）完全支持
- Safari 需 ≥15.4，iOS ≤15.3 的用户会看到无高度的盒子
- 如果你的项目还要支持微信内置浏览器（X5 内核）、钉钉等，
aspect-ratio仍不可单独依赖
稳妥做法：用 aspect-ratio + padding-top 回退（后者会被覆盖，但降级时生效）。
内容居中和内边距容易踩的坑
用 padding 撑高后，内容默认在顶部，且没有内边距空间——这不是 bug，是机制使然。
典型错误：直接给子元素加 margin: auto 或 text-align: center，发现没用。
- 文字/图标居中：在绝对定位的子容器里用
display: flex; align-items: center; justify-content: center - 需要上下留白？别动 padding，改用子容器的
padding或top/bottom偏移 - 背景图铺满？确保子容器设
background-size: cover，且父容器不要设overflow: hidden以外的裁剪限制 - 如果子内容有滚动需求，得额外处理
overflow和height，此时aspect-ratio反而更可控
最常被忽略的是：父容器没设 width，或者被 flex/grid 的收缩行为干扰，导致 padding 计算基准丢失——这时比例就崩了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
