为何要为body设置#fff背景色？浏览器默认白色为何还要显式设置？

这个问题问得特别戳中细节——很多人觉得浏览器默认背景就是白色，显式写这行代码多此一举，但其实它背后藏着不少实用的考量：

• 消除浏览器默认样式的不确定性
  虽然现代主流浏览器默认背景是白色，但并不是所有情况都如此：比如一些老旧浏览器、特定的浏览器精简版，或者某些浏览器的默认主题可能把背景设为浅灰色（比如#f0f0f0）。显式设置background: #fff能确保页面在绝大多数默认环境下的背景色统一，避免出现跨浏览器的视觉差异。

• CSS重置/规范化的标准操作
  几乎所有常用的CSS重置工具都会包含这行代码，目的是抹平不同浏览器之间的默认样式差异。毕竟前端开发的核心目标之一就是让页面在各种环境下表现一致，显式设置背景色是这个流程里的基础环节。

• 适配打印场景
  很多用户打印网页时会关闭浏览器的“打印背景色和图像”选项，这时候如果页面没有显式设置body背景为白色，部分浏览器可能会把背景设为透明，导致一些依赖白色背景的元素（比如白色卡片、浅色文本）在打印时出现可读性问题。显式设置白色背景能在打印时确保页面底色正常，提升打印内容的可用性。

• 避免透明元素的视觉异常
  如果页面中有半透明的容器、弹窗或者渐变元素，当它们嵌套在没有显式背景的body上时，可能会意外透出浏览器的默认背景色（如果不是纯白的话）。显式设置body为白色，能确保所有透明元素的底层底色都是预期的纯白，避免出现奇怪的视觉叠加效果。

至于你提到的“用户可以自定义CSS覆盖”的问题：确实，用户通过浏览器自定义样式、插件或者用户样式表可以轻松覆盖这行设置，但显式设置的初衷是服务于绝大多数没有修改浏览器默认设置的用户，确保他们看到的页面符合设计预期。而那些主动修改样式的用户，本身就是希望自定义浏览体验，覆盖行为是合理的，这并不影响显式设置的核心价值。

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