用vh/vw填满视口需确保html/body无边距、设height:100%、盒子用box-sizing:border-box；flex居中失效多因父级高度未继承；cover裁剪长边，contain留白；iOS Safari中100vh会随地址栏变化，应动态设置--vh变量。
用 vh 和 vw 填满整个视口，但盒子没撑开？
直接给元素设 height: 100vh 看似能填满屏幕，但常遇到内容溢出、滚动条意外出现、或父容器没高度导致失效。根本原因是 vh 是相对于视口的，而盒模型中的 padding、border、margin 默认不参与尺寸计算，且父级若未显式设高，100vh 在某些嵌套场景下会被忽略。
- 确保根级容器（比如
body和html）没有默认margin或padding：加html, body { margin: 0; padding: 0; height: 100%; } - 如果盒子本身有
padding或border，用box-sizing: border-box，否则总高度会超出100vh - 避免在 flex 容器子项里只写
height: 100vh——flex 项默认不拉伸，得配合flex: 1或align-items: stretch
background-size: cover 和 contain 的实际表现差异
全屏背景图最常踩的坑是图被裁剪得莫名其妙，或者留白难看。这不是 CSS 写错了，而是对 cover 和 contain 的缩放逻辑理解偏差。
-
background-size: cover保证图片完全覆盖容器，**短边等比放大后裁切长边**——适合强调视觉冲击，但关键内容不能放在图边缘 -
background-size: contain保证整张图完整显示，**长边等比缩放后居中**——适合信息图或 Logo 背景，但很可能上下/左右留白 - 想让图“刚好铺满又不裁不白”，基本做不到；更现实的做法是用
background-position配合cover微调焦点，例如background-position: center 20%
移动端 viewport 缩放导致 100vh 失准怎么办？
Safari（尤其是 iOS）在地址栏收起/展开时会动态改变视口高度，100vh 可能瞬间变成「页面可见区域高度」而非「设备屏幕高度」，造成背景跳动或底部露白。
- 不要依赖
100vh做精确布局，尤其涉及固定定位或动画过渡时 - 替代方案：用 JS 动态读取
window.innerHeight并写入自定义 CSS 变量，例如:root { --vh: 100vh; }→ JS 更新为document.documentElement.style.setProperty('--vh', window.innerHeight + 'px'); - 注意监听
resize事件，iOS Safari 连续触发多次，建议加简单节流
全屏背景 + flex 布局时，子内容垂直居中失效？
常见写法是给容器设 display: flex; justify-content: center; align-items: center;，但加上 height: 100vh 后内容还是贴顶——大概率是父级没继承高度，或 flex 容器被其他样式干扰。
立即学习“前端免费学习笔记（深入）”；
- 检查是否漏了
html, body { height: 100%; }，否则100vh在 flex 上级可能无效 - 避免在 flex 容器上同时设
min-height和height，浏览器渲染优先级不一致，可能导致align-items: center计算基准错乱 - 如果子元素是文字，确认没被
line-height或vertical-align干扰；纯 flex 居中不需要这些
真正麻烦的不是怎么写，而是不同设备、不同浏览器对 vh 和 background-size 的解释存在细微差别，上线前至少要在 iOS Safari、Chrome Android、桌面 Chrome 三端实测滚动和缩放行为。
