HTML 中的
和 元素，不知道你有没有注意过。一个作为 HTML 内容部分的父元素，一个作为整个网页的根元素，应用到它们上的样式表有什么区别，又究竟会影响到网页上的哪一部分呢？最近写新主页，遇到了一些麻烦，于是对该问题做了一些研究。
body {
display: block;
margin: 8px;
}
这两条告诉了我们什么呢：
body 被渲染成一个块元素；
body 有 margin，可见它外面还有东西？
用一个简单的例子试一试：
其实
的行为就和一个普通的如果不指定宽度，则宽度自动占满其父元素(？)；
如果不指定高度，则高度设为刚好能容下内部元素；
默认 overflow 行为是显示溢出内容。
可是，你有没有想到什么问题？
我们经常使用 body{ background: xxx; } 来设置整个网页的背景。但如果
真的是一个普通的块元素，而且还带有 margin，那么为什么这个 background 设置能应用到整个网页的绘画区域呢？根元素 的背景决定了整个绘画区域的背景。但如果 元素背景为透明(默认值)，就会取其
子元素的背景作为 的背景，其位置等属性变成相对于 元素的。这和我们的日常观感一致(背景 svg：画布大小 128x128，在 (64,64) 处有一个半径为 64 的红色实心圆)：
如果给 设置了背景，那么
的背景行为就和块元素一致了(点上面的“设置html背景”试一试)。可是，上面是不是用到了 的背景来着？可见 元素也有样式、也需要绘制咯？
如果尝试用 F12 或者加 border 的方法来查看 元素在整个绘画区域中的位置，很容易产生“ 的确就是比
长宽更多一点的外围元素”这样的错觉。可是，你有没有注意过……网页的滚动条是怎么来的？
突然转向了一个奇怪的话题。为什么网页太长了，就会出现滚动条(默认行为如此)？
我们都知道，一个块元素设置 overflow 样式为 auto，当其中内容过长超过块元素长宽时，就会出现滚动条。
——其实，网页有滚动条是因为 默认拥有 overflow:auto 的样式！而 元素的尺寸，正是窗口的尺寸。
来验证一下吧。DOM 中 document.documentElement 代表的其实就是 元素，访问 clientWidth、clientHeight 就可以得到其宽高(其实不太科学，详见此文)。我们搞了个超大的
：看一看 的尺寸，果然没有因为
而变大。改变浏览器窗口大小，还会发现其尺寸也会跟着变化。看来， 也可以看作一个块元素咯。不过，上面例子中给 设置的 border，位置好像不太对劲儿，纵向一直延续到底了。这个嘛，我还不知道怎么解释，没查到资料。但鉴于一般也没人会给 设置 border，姑且先搁置了吧。
这里有一篇简明的文章，探讨本节的问题。
和
上的 CSS在 上应用 CSS 的机会并不多。而在
上，最重要的应用就是设置背景了。在 CSS2 中，不能在 background 属性中指定两个图片。所以以前有在 中指定另一个背景图片这样的应用。当然，除非为了兼容古代 IE，否则已经没必要这么做了。此外，前面提到一般浏览器都会给
加上 margin。有时候想要让内部元素紧贴窗口边界，可以通过 margin: 0 来重置掉这一设置。另外一个在 或
上设置 CSS 的情景，是让子元素继承样式。比方说设置全局字体样式，“*”选择器杀伤力可能有点大。可以用 html 选择器加上继承：html {
color: red;
}
2594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
