body 默认不占满视口是因为 html 无显式高度导致 height: 100% 失效；需 html { height: 100%; } 奠定基准，body { margin: 0; min-height: 100%; } 更安全；100vh 在 iOS Safari 有动态视口问题，慎用于可滚动区域；Flex/Grid 中子元素 height: 100vh 可能失效，应优先设父容器 min-height: 100vh；背景图用 cover/contain 而非 100% 100% 以保比例。
body 默认不占满视口，是因为 height 继承链断裂
直接写 body { height: 100%; } 失效，不是你漏写了分号，而是 html 根元素本身没有明确高度——它默认按内容撑开，100% 就算出来是 0。浏览器不会自动把 html 高度设为视口高，必须显式声明。
常见错误现象：div.fullscreen { height: 100%; } 渲染出来高度为 0 或仅几像素；背景色/图只显示一小块，下方大片白底。
-
html { height: 100%; }是必要前提，为整个继承链提供高度基准 -
body { margin: 0; min-height: 100%; }比height: 100%更安全：既保证至少铺满一屏，又允许长页面自然滚动 - 别用
* { margin: 0; padding: 0; }代替body { margin: 0; }——它不能解决html缺失高度的问题
100vh 看似简单，但移动端 Safari 会“跳”
在 iOS Safari 中，地址栏收起时视口高度变大，100vh 值随之变化，导致页面内容被顶出、布局错位。这不是 bug，是 Safari 对“视口”的定义包含 UI 栏，且动态响应滚动状态。
使用场景：登录页、引导页、模态遮罩等无滚动或固定结构的容器。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 纯静态全屏层（如遮罩）可用
height: 100vh;，但要加position: fixed;避免受文档流影响 - 主内容区慎用
100vh直接设在body上——会导致长页面被截断、无法滚动 - 兼容方案：用 JS 动态读取
window.innerHeight并写入自定义 CSS 变量，再用height: var(--vh, 100vh);
Flex/Grid 容器里子元素 height: 100vh 失效
当父容器是 display: flex 或 display: grid，子元素即使写了 height: 100vh，也可能被忽略——因为 flex/grid 的默认对齐行为（align-items: stretch 仅作用于 cross axis，不强制 main axis 高度）。
典型问题：.container { display: flex; } .panel { height: 100vh; } → .panel 高度只等于内容高。
- 优先让父容器自己全屏：
.container { min-height: 100vh; display: flex; } - 若必须控制子项，flex 下加
align-self: stretch;，grid 下加justify-self: stretch; align-self: stretch; - 避免在 flex 容器中混用
height: 100vh和flex: 1——语义冲突，行为不可控
平铺背景图不是拉伸，cover 和 contain 必须分清
用 background-size: 100% 100% 强制拉伸图片，宽高比一变就严重失真。真正“无缝平铺”指视觉上填满且不失真，靠的是 cover 或 contain 的等比缩放逻辑。
使用场景：首屏大图、品牌页背景、仪表盘主视图。
-
background-size: cover;→ 等比放大至至少一边填满容器，多余裁剪；适合强调视觉冲击 -
background-size: contain;→ 等比缩小至完全可见，留白不可避免；适合图表、Logo 等需完整展示的内容 - 必须配合
background-position: center;和background-repeat: no-repeat;，否则裁剪位置随机、重复干扰
真正难的不是写哪一行 CSS，而是判断当前场景该用 min-height: 100% 还是 100vh，该让容器撑开还是让子项拉伸，该裁剪还是该留白——这些选择没有标准答案，只取决于内容是否滚动、是否适配移动端、是否需要语义正确。
