CSS中html、body的background-color属性作用域为何与单独设置body不同

原因解释 #

1. CSS背景传播的特殊规则 #

浏览器针对HTML和body元素的背景有一套特殊的渲染逻辑：

• 如果<html>根元素没有设置任何背景样式，那么<body>元素的背景会自动向外传播，覆盖整个浏览器视口，不受body自身高度的限制
• 一旦你主动给<html>根元素设置了背景样式，上面的传播规则就会直接失效，此时<body>的背景只会作用在自身的盒模型范围内，和普通块级元素表现一致

2. 元素默认高度的问题 #

默认情况下，<html>和<body>元素的高度都不是默认占满视口的，完全由内部子元素的总高度撑开。你当前页面的内容只有header、h1、p几个元素，总高度很低，所以body元素本身的高度就和内容总高度一致。

对应你的代码场景 #

你写的第一行CSShtml , body{ background-color: blue; }同时给根元素html和body都设置了蓝色背景，后续写的body{ background-color: white; }只是覆盖了body自身的蓝色背景，html元素的蓝色背景依然生效。
此时因为html已经有明确的蓝色背景，body的白色背景不会向外传播，只能覆盖body自身内容高度的区域，剩下的视口空白区域就会显示html的蓝色背景，和你看到的效果完全一致。

解决方法 #

如果要实现整个页面全白的效果，可以选任意一种方案：

• 移除给html设置的蓝色背景规则，只保留body的白色背景，此时body的背景会自动传播覆盖整个视口
• 给html和body都添加min-height: 100vh规则，强制两个元素的高度最少占满整个视口，此时body的白色背景也会铺满全页

内容的提问来源于stack exchange，提问作者mashtock