全屏背景需同时设置html和body的height: 100%并清除margin: 0；推荐min-height: 100vh替代height: 100%，避免内容超长截断；注意子元素背景覆盖、z-index及深色模式适配。
body 默认背景只撑开内容区域，不是全屏
HTML 页面默认的 body 元素不会自动占满整个视口高度，尤其当页面内容少时，设置的背景色只在内容区域显示，下方留白——这不是颜色没生效，而是容器本身没铺满。
- 必须同时给
html和body设置height: 100%，否则body的百分比高度计算失效 -
margin: 0要清掉body默认外边距，否则顶部/左右仍可能露白 - 如果用了 Flex 或 Grid 布局，
min-height: 100vh比height: 100%更稳妥，避免子元素塌陷导致背景中断
用 vh 单位比 % 更可靠，但要注意滚动条影响
100vh 表示视口高度，直接让元素撑满屏幕，绕过父级高度继承问题。但桌面浏览器滚动条会占用宽度，100vw 可能导致横向滚动；移动端 Safari 对 vh 的处理也有偏差（地址栏收起/展开时值会变）。
- 全屏背景首选：
min-height: 100vh，而不是height: 100vh，防止内容超长时被截断 - 若需严格等高且内容不超屏，可用
height: 100vh+overflow-y: auto控制内部滚动 - Safari iOS 下
vh不准？改用 JavaScript 动态设style.height = window.innerHeight + 'px'，并监听resize
背景色被子元素“盖住”？检查 z-index 和 position
明明给 body 设了背景色，但某些区块（比如 header、section）看起来没被覆盖，其实是它们自身有白色背景或不透明背景色，把底层盖住了。
- 确认子容器没有设置
background-color（尤其是#fff或rgba(255,255,255,1)） - 如果子元素用了
position: relative或absolute，又没设z-index，它仍在文档流中正常叠放，背景色不会穿透 - 真正需要“穿透”的场景（如半透明遮罩），应设
background-color: rgba(0,0,0,0.5)，而非依赖父级背景
内联样式 vs CSS 文件：优先写在样式表里
用 能立刻看到效果，但维护性差，且容易被后续 CSS 规则覆盖（特别是带 !important 的）。
立即学习“前端免费学习笔记（深入）”；
- 内联样式优先级高于外部样式表，但低于
!important声明，调试时容易误判来源 - 多个页面共用背景？提取成 CSS 类，比如
.bg-light { background-color: #f9f9f9; } - 深色模式适配？用
@media (prefers-color-scheme: dark)切换background-color，别硬编码
最常被忽略的是 html 元素本身没设高度——光调 body 没用。还有就是开发者工具里看到背景色“生效了”，却没注意它只作用在 body 的盒模型范围内，而这个盒子根本没撑开。
