body高度为0但是背景色填充整个浏览器

  给body元素设置背景色,但是body没有内容,高度没有填充整个浏览器情况下,浏览器整个窗口都是body设置的背景色,这个是什么导致的?

  测试代码如下

body高度为0但是背景色填充整个浏览器

body高度为0但是背景色填充整个浏览器
啥???body高度才28(默认margin 8x2+padding 5x2+border 1x2)??那整个浏览器的颜色是哪里来的????? smile

<!doctype html>
<style>
    body{background:#f00;border:solid 1px #000;padding:5px}
</style>

  截图可以看出来body并没布满整个浏览器窗口,但是设置的背景色填充整个浏览器。下面是来自一些网上收集的解释。

1)

来源:http://www.zhangxinxu.com/wordpress/2009/09/%E5%AF%B9html%E4%B8%8Ebody%E7%9A%84%E4%B8%80%E4%BA%9B%E7%A0%94%E7%A9%B6%E4%B8%8E%E7%90%86%E8%A7%A3/

1.背景色 一般情况下,我们css控制的最高结点就是body,例如设置:body{background:#069;}则浏览器界面就是完全的#068的背景色。 这里看上去是body标签下的背景色起作用了,我到不这么认为,这里不是body的background起作用,而是body作为一个根结点起作用 了,html标签未被激活,body但当类似于根结点的结点,其background背景色被浏览器俘获,浏览器界面背景色为background的背景 色,以上是我的推论,这种推论不是我凭空想象出来的,而是有一定的根据的。看下面的一段css代码:

body{background:#069; margin:100px; border:30px solid #093;}

意思很简明:外边距100像素,边框30像素,背景色#069,按照对一般标签的理解,100像素的外边距应该不含有背景色的,然而显示的结果是(Firefox下表现与此类似):

IE6下body设置background颜色边框和边距后的表现

IE6下body设置background颜色边框和边距后的表现

还有一点可以证明我上面的推论,就是一旦设置了html节点的background背景色之后,body的背景色将失效。例如下面的简短代码:

html{background:#999;}
body{background:#069; margin:100px; border:30px solid #093;}

跟上面的想比,就是添加了html的背景色,结果(截自IE6,Firefox浏览器下表现一致):

html标签设置背景色后的样式表现

html标签设置背景色后的样式表现

结果是什么呢?body标签的满屏的背景色不见了,“失效”了。其实,在我看来,不是“失效”,是生效了。当html标签无背景样式时,body的 背景色其实不是body标签的背景色,而是浏览器的。一旦html标签含有背景色,则body的背景色变成了正常的body标签(一个实实在在,普普通通 标签)的背景色,而此时的html标签最顶级,背景色被浏览器获取,成为浏览器的背景色。

2)

来源:http://blog.csdn.net/xiaowanzi0713/article/details/52325630

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

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

评论(0)网络
阅读(167)喜欢(0)不喜欢(0)HTML/CSS兼容/XML