2024年网安最全body没有高度设置背景色为什么可以全屏显示？

但！

当我们没有设置任何高度的情况下，给body设置背景色，颜色竟然是可以布满浏览器的，然而可以看到控制台中，body实实在在是没有高度的，这究竟是为什么呢？

body {
    background: pink;
}

事实上，当我们单独给body设置背景颜色时，并不是body标签被赋予了背景色，而是【 浏览器画布 】赋上了颜色，可以理解为，body的背景色被浏浏览器”吃掉“

那如果我们同时给html与body设置背景色，会发生什么样的结果呢

html {
    background: orange;
}
​
body {
    background: pink;
}

可以看到，我们设置的body背景色竟然“失效了”，浏览器被赋予了html的背景色

而在我看来，实际是我们设置的body背景色[生效了]，但因body默认高度为0，所以在页面中并没有粉色区块显示，那我们尝试在body中添加一些内容

可以看出，body的高度被撑开，而body的背景色则是实实在在只给了body

所以我们可以得出一个结论

浏览器会“吸收”html与body的背景色

当只设置了body背景色时，浏览器发现了，于是把这个背景色“占为己有”

而如果html设置了背景色，浏览器则会认为html离我更近，所以会“拿走”html的背景色当成自己的颜色

当然，到现在为止，我们实验的都是纯色背景，那如果我们设置成渐变色，还是相同的结果吗？

疑问产生，开始实验

首先，只设置body的背景为线性渐变粉色pink到白色#fff，预想结果应该是和背景一样，直接浏览器从上往下的渐变

body {
    background: linear-gradient(pink, #fff);
}

嗯？这怎么和预想不一样，再放大页面看一下渐变，就可以发现每个渐变的高度和html的高度是一致的，而html的高度则是body的默认margin撑开

于是开始设置

* {
    margin: 0;
    padding: 0;
}

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！