video默认inline导致并排错位，解决方法：设display:block或vertical-align；推荐flex布局（display:flex+gap+flex-shrink:0）；响应式用grid（grid-template-columns+aspect-ratio）；移动端需width:100%+max-width:100%。
video 元素默认是内联元素，直接写会换行错位
HTML5 的 默认是 display: inline，和文字一样对齐基线（baseline），导致多个 并排时底部留白、高度不一致、看起来像错位。这不是 bug，是 CSS 渲染行为。
常见现象：两段 并排，下方出现几像素空白；加了 width 但高度塌陷；用 float 后父容器不包裹。
- 最简解决：给
加display: block或vertical-align: top/middle - 更稳妥：用
display: flex容器统一控制对齐与间距 - 避免用
float布局，现代项目中它会引发清除浮动、塌陷等问题
用 flex 布局横向并排多个 video 元素
Flex 是目前最可控、兼容性足够（IE11+）的方式，能轻松处理等宽、自适应、间隙、响应式等需求。
关键点在于：父容器设 display: flex，子 不需要额外 display 修改，但建议显式设 flex-shrink: 0 防止被压缩变形。
立即学习“前端免费学习笔记（深入）”；
-
gap比margin更干净，不会影响首尾外边距 -
flex-wrap: wrap让小屏下自动换行，比媒体查询更轻量 - 不设
flex-basis时，width属性仍生效；设了flex: 1就会忽略width
响应式视频网格：grid 比 float 更可靠
要实现 2 列、3 列自适应网格（比如画廊式视频列表），display: grid 是比 float 或老式 inline-block 更简洁的选择。
Grid 能天然处理行列对齐、等高、间隙，且不需要清除浮动或 hack。
-
aspect-ratio: 16/9是关键：让视频容器保持比例，避免拉伸或黑边（注意：IE 不支持，需 fallback） -
minmax(300px, 1fr)表示每列最小 300px，最大均分剩余空间 - 不用
width和height固定尺寸，改用width: 100%+aspect-ratio更健壮
移动端视频竖排时的常见坑
在手机上单列显示视频时，容易忽略宽度溢出、控制条遮挡、点击区域太小等问题。
尤其当 外层有 padding 或 border，又没设 box-sizing: border-box，会导致实际宽度超 100%。
- 始终给
设width: 100%，不要依赖width属性值（它在响应式中无效） - 加
max-width: 100%防止高清视频撑破容器 - 如果控制条被截断，检查是否父容器有
overflow: hidden或transform触发了新层叠上下文 - iOS Safari 中，
controlslist="nodownload"可隐藏下载按钮，但无法移除全屏按钮
aspect-ratio、flex-shrink: 0、display: block 这三个小设置，比一堆 hack 更管用。 
