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;
}