黑马程序员技术交流社区

标题: 【上海前端】body和html到底有多高&&浏览器的背景色问题 [打印本页]

---

作者: 叶夜葉    时间: 2019-6-20 21:31
标题: 【上海前端】body和html到底有多高&&浏览器的背景色问题
[color=rgba(0, 0, 0, 0.75)]body和html到底有多高&&浏览器的背景色问题
转载自：https://blog.csdn.net/xiaowanzi0713/article/details/52325630

在此之前我一直以为在浏览器里html默认和浏览器窗口等高，而body默认和html等高，现在想想自己为什么会这么想，主要是因为这个:

[CSS] 纯文本查看 复制代码

body{

    background:blue;

}

• 1
• 2
• 3
  

当我这么干的时候，得到了这个结果：

看，body的背景色占据了整个浏览器窗口，这样想来body撑开浏览器什么的也不是匪夷所思了，但书上告诉我们正常情况的高度是不会继承的，那么这个body到底有多高呢？我们添加一行:

[CSS] 纯文本查看 复制代码

body{

    background:blue;

    border:5px solid black;

}

• 1
• 2
• 3
• 4
  

神奇的事情发生了:
啥？？？body没高度？？那浏览器的颜色是哪里来的？？？？？
还没完，还有更神奇的事情，一起来看下:
在以上代码的基础上，我添加了这样两行style：

[CSS] 纯文本查看 复制代码

html {

    background:yellow;

}

• 1
• 2
• 3
  

它又变成黄色了。。。。。
嗯，这样想的话，难道是html标签撑开了窗口???
一探究竟:

[CSS] 纯文本查看 复制代码

html {

    background:yellow;

    border:5px solid red;

}

• 1
• 2
• 3
• 4
  

然后我们看到html仿佛有点高度？？

当然不，这是body的外边距啦2333让我们去掉这个东西:

[CSS] 纯文本查看 复制代码

body {

    background:blue;

    margin:0;

}

• 1
• 2
• 3
• 4
  

于是真相是:

魔性的事情出现了，html原来也是没有高度的hhhhh。

不过话说回来，这不刚好和我们宽度默认继承父级和浏览器窗口等宽，而高度默认不继承为0相吻合吗？所以html和body标签默认高度为0这点，是毋庸置疑的。
那么问题来了，body和html并没有高度，那么满屏的黄色和蓝色是怎么显示出来的？

我觉得这和浏览器本身的机制有关，我们可以认为浏览器是一个会“吸收”颜色的东西，当我们给body设置颜色时，虽然body没有高，但是浏览器底板需要颜色，它看到了body的颜色
，就想要拿来变成自己的，然后它把自己搞成了body设置的那个blue，当我们给html也设置了一个颜色后，浏览器发现，html好像离我更近啊，于是就就近渲染了html标签的背景色yellow给自己.
这样一来，我们看到的浏览器窗口又变成黄色了。

因此，我们所看到的那个背景色，既不属于body标签，也不属于html，它属于更底层的那个底板，是浏览器窗口本身吸收了body和html标签中更靠近自己的那个后，渲染出来的浏览器窗口底板的颜色。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2