html中的body没有高度设置背景色为什么可以全屏显示

小编给大家分享一下html中的body没有高度设置背景色为什么可以全屏显示，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
　　— 关于html和body的那些事
　　还记得我们开发全屏页面或者是移动端页面时经常会设置一句话
　　html, body { height: 100%; }
　　是不是只知道用？却不知道怎么回事？
　　原因是，免费云主机、域名当没有内容撑开高度时，html和body的默认高度是0，如果内容想要按照比例或是撑满全屏时，就没办法正常使用百分比
　　而如果只设置body { height: 100%; }，这时body以html的高度为基准，但html默认高度也是0，所以需要设置html与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;
　　}
　　同样，如果渐变给html设置的，也不会作用到浏览器上
　　说明浏览器并不会把渐变色据为己有，那如果想要设置全屏渐变，就需要用到我们文章开头说到的
　　html, body { height: 100%; }看完了这篇文章，相信你对“html中的body没有高度设置背景色为什么可以全屏显示”有了一定的了解，如果想了解更多相关知识，欢迎关注云技术行业资讯频道，感谢各位的阅读！

相关推荐: CSS兼容是什么

这篇文章主要介绍“CSS兼容是什么”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS兼容是什么”文章能帮助大家解决问题。CSS兼容包括以下几点:1、CSS网页版式错位2、CSS网页在不同浏览器显示文字大小、颜色不一致…