用 padding-top 百分比能锁住宽高比，因为其值按父容器宽度计算，如16:9设为56.25%；需配合 position: relative/absolute、height: 0 及三层结构实现，避免嵌套干扰。
为什么用 padding-top 百分比能锁住宽高比
因为 CSS 中 padding-top 和 padding-bottom 的百分比值，是相对于**父容器宽度**计算的，不是高度。这个反直觉特性，恰好能用来“骗”出固定比例的容器：比如要 16:9，就设 padding-top: 56.25%（9 ÷ 16 = 0.5625）。
常见错误是直接写 height: 56.25% —— 这会失效，因为高度百分比在非定位元素上依赖父元素显式高度，而父容器往往没设高度。
- 只对
position: relative的父容器生效（子元素需position: absolute填满） - 必须配合
height: 0清空默认高度，否则 padding 会叠加在内容高度上 - 不要给父容器设
min-height或height，否则会破坏比例逻辑
HTML 结构怎么搭才不翻车
最简可靠结构只有三层：外层容器（负责 padding）、中间定位层（撑开空间）、内层视频（绝对定位铺满）。多一层 wrapper 或错用 display: flex 都可能让 padding 计算失效。
典型翻车场景：把 <video></video> 直接塞进 padding 容器里，没加 position: absolute —— 视频会按默认块级行为撑高容器，padding 反而成了额外边距。
立即学习“前端免费学习笔记（深入）”；
- 外层：
div设position: relative和padding-top - 中间：
div设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 内层：
video或iframe放在中间层里，设width: 100%; height: 100%; object-fit: cover
object-fit 和 width/height 怎么配
object-fit 决定视频内容如何适应容器，不是容器本身。如果只设 width: 100%; height: 100% 但没设 object-fit，视频会拉伸变形（默认是 fill）。
兼容性要注意：object-fit 在 IE 完全不支持，iOS Safari 旧版本有渲染 bug；若必须兼容，得 fallback 到 JS 动态计算高度或 background-image 模拟。
- 想保持原始比例、裁剪多余部分 → 用
object-fit: cover - 想完整显示、留黑边 → 用
object-fit: contain - 别用
max-width: 100%替代width: 100%，否则在小屏下可能缩不进容器
响应式断点下 padding 值要不要改
一般不用改。因为 padding-top 百分比始终基于当前容器宽度，只要比例目标不变（比如一直是 16:9），一个值就够用。改它反而容易引入不一致。
真正要动的是视频源本身：比如在移动端切更小分辨率的 src，或用 srcset + media 属性做资源适配。padding 只管“框”，不管“图”。
- 如果需要不同比例（如桌面 16:9、手机 4:5），才需媒体查询重设
padding-top - 避免在
@media里同时改padding-top和height，容易冲突 - 用
aspect-ratio（现代浏览器）可替代 padding 方案，但 Safari 15.4+ 才稳定，老项目慎用
padding 技巧看着简单，但每个层级的定位、尺寸传递和盒模型理解差一点，就会白忙活半天——尤其是嵌套在 Flex/Grid 里时，父容器的尺寸来源很容易被忽略。
