background-color 默认覆盖 content、padding 和 border 区域，不覆盖 margin；其不可见通常因元素无尺寸、display/float/position 导致塌陷、background 简写重置或子元素背景遮盖。
background-color 默认覆盖哪些区域？
它只覆盖 content + padding + border 区域，不覆盖 margin —— 这是 CSS 规范定义的行为，不是 bug。父元素的背景色天然不会“延伸”到子元素的 margin 外部，除非父元素自身有 border 或 padding（此时会触发 BFC，让背景“包裹”住子元素外边距）。
为什么加了 background-color 却看不见？
大概率是元素本身没尺寸，或者被其他样式悄悄覆盖：
-
display: inline元素无法设置height，background-color只在行内高度范围内生效；临时加display: inline-block或block就能验证 -
float或position: absolute导致父容器高度塌陷，background-color画在了“0 高度”的区域上 - 写了
background: url(...) no-repeat;，这条声明会重置background-color为transparent，哪怕你前面单独设过颜色 - 用了通配符
*设置了全局background-color，结果子元素（如<h1></h1>、<nav></nav>）自带非透明背景，把父级颜色盖住了
如何确认 background-color 到底有没有生效？
别靠肉眼猜，直接看 DevTools：
- 选中元素 → 右侧 Computed 面板，搜
background-color，看值是否为预期颜色，且未被划掉 - 同页面检查是否有
background简写规则（比如background: #fff url(...) center;），它会清空所有独立设置 - 点开 Layout 面板，确认
width和height不为0；加一句border: 1px solid red;能立刻暴露尺寸问题
想让背景“看起来铺满”，关键在控制盒模型
常见场景下，真正需要的不是“让 background-color 去覆盖 margin”，而是让元素本身撑开：
- 父容器用
overflow: hidden或display: flow-root清除浮动，恢复高度，背景自然显示完整 - 全屏背景要覆盖整个视口内容，得确保
html和body都设了height: 100%，且body的min-height: 100vh - 如果子元素有大
margin导致视觉“断层”，与其硬调背景，不如给父元素加padding把空白收进来——因为background-color本就包含padding区域
Computed 里的实际值和 Layout 里的真实尺寸，比反复改颜色代码管用得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
