行，但仅限简单演示或临时调试；内联style会混淆结构与样式，影响可维护性、暗色模式适配及团队协作，且不支持媒体查询和过渡动画。
直接用 body 的 style 属性设置背景色行不行？
行，但仅限简单演示或临时调试。写成 确实能立刻生效，不过它把结构和样式混在一起，后续改颜色、加渐变、适配暗色模式都会变得麻烦。浏览器渲染时也不会报错，但团队协作或项目稍大就容易被 eslint 或 stylelint 报警。
background-color 和 background 有什么实际区别？
前者只管纯色，后者是复合属性，能同时设颜色、图片、重复方式、位置等。如果之后要换成 background-image，或者加 background-attachment: fixed，用 background 一条写完更稳妥。但注意：background 会覆盖掉所有其他 background-* 设置，比如你先写了 background-color: red，再写 background: url(...) no-repeat，红色就没了。
-
background-color: #333—— 安全、明确、不会意外清空其他背景配置 -
background: #333 url(bg.png) center/cover—— 适合需要多层控制的场景，但得一次写全
在
常见原因是 body 没有撑满 viewport，尤其当页面内容少、没有滚动条时。默认 body 有 margin（各浏览器略有差异），而且它的 height 是“内容高度”，不是 100% 屏幕高。解决方法不是硬加 height: 100vh（会导致滚动条异常），而是：
- 重置
body和html的 margin/padding：body, html { margin: 0; padding: 0; } - 让
html和body都继承视口高度：html { height: 100%; } body { min-height: 100%; } - 如果用了 Flex 布局，
body { display: flex; flex-direction: column; }也能自然撑开
暗色模式下怎么让背景色自动切换？
别靠 JS 监听 prefers-color-scheme 后手动改 style，维护成本高。用 CSS 媒体查询最稳：
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
}
}
@media (prefers-color-scheme: light) {
body {
background-color: #ffffff;
}
}
注意：必须写在全局样式里（比如 <style></style> 或外链 CSS），内联 style 属性不支持媒体查询。另外，background-color 的过渡动画默认不生效，如需淡入淡出，得显式加 transition: background-color 0.3s 到 body 规则中。
真正麻烦的是第三方组件可能自带背景色，会盖过 body 的设置；这时候得查 computed styles，看哪条规则优先级更高，而不是反复调 style 属性。
