黑马程序员技术交流社区

标题: 【上海前端】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;
}

当我这么干的时候,得到了这个结果:

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

[CSS] 纯文本查看 复制代码
body{
    background:blue;
    border:5px solid black;
}

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

[CSS] 纯文本查看 复制代码
html {
    background:yellow;
}

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

[CSS] 纯文本查看 复制代码
html {
    background:yellow;
    border:5px solid red;
}

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

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

[CSS] 纯文本查看 复制代码
body {
    background:blue;
    margin:0;
}

于是真相是:

魔性的事情出现了,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