网页中的 <body> 和 <html> 元素及其样式
2017-07-13 10:27
281 查看
HTML 中的 <body> 和 <html> 元素,不知道你有没有注意过。一个作为 HTML 内容部分的父元素,一个作为整个网页的根元素,应用到它们上的样式表有什么区别,又究竟会影响到网页上的哪一部分呢?最近写新主页,遇到了一些麻烦,于是对该问题做了一些研究。
这两条告诉了我们什么呢:body 被渲染成一个块元素;body 有 margin,可见它外面还有东西?用一个简单的例子试一试:其实 <body> 的行为就和一个普通的 <div> 差不多嘛:如果不指定宽度,则宽度自动占满其父元素(?);如果不指定高度,则高度设为刚好能容下内部元素;默认 overflow 行为是显示溢出内容。可是,你有没有想到什么问题?
<body> 作为一个块元素
<body> 元素定义了 HTML 文档的内容。W3School 上说,大多数浏览器会赋予它下面的样式:?<body> 的背景为什么溢出去了?
我们经常使用body{ background: xxx; }来设置整个网页的背景。但如果 <body> 真的是一个普通的块元素,而且还带有 margin,那么为什么这个 background 设置能应用到整个网页的绘画区域呢?栈溢出 Applying a background to <html> and/or <body> 给出了解释。这是一个特例,概括来讲如下:根元素 <html> 的背景决定了整个绘画区域的背景。但如果 <html> 元素背景为透明(默认值),就会取其 <body> 子元素的背景作为 <html> 的背景,其位置等属性变成相对于 <html> 元素的。这和我们的日常观感一致(背景 svg:画布大小 128x128,在 (64,64) 处有一个半径为 64 的红色实心圆):如果给 <html> 设置了背景,那么 <body> 的背景行为就和块元素一致了(点上面的“设置html背景”试一试)。可是,上面是不是用到了 <html> 的背景来着?可见 <html> 元素也有样式、也需要绘制咯?如果尝试用 F12 或者加 border 的方法来查看 <html> 元素在整个绘画区域中的位置,很容易产生“<html> 的确就是比 <body> 长宽更多一点的外围元素”这样的错觉。可是,你有没有注意过……
网页的滚动条是怎么来的?
突然转向了一个奇怪的话题。为什么网页太长了,就会出现滚动条(默认行为如此)?我们都知道,一个块元素设置 overflow 样式为 auto,当其中内容过长超过块元素长宽时,就会出现滚动条。——其实,网页有滚动条是因为 <html> 默认拥有overflow:auto的样式!而 <html> 元素的尺寸,正是窗口的尺寸。来验证一下吧。DOM 中 document.documentElement 代表的其实就是 <html> 元素,访问 clientWidth、clientHeight 就可以得到其宽高(其实不太科学,详见此文)。我们搞了个超大的<body>:看一看 <html> 的尺寸,果然没有因为 <body> 而变大。改变浏览器窗口大小,还会发现其尺寸也会跟着变化。看来,<html> 也可以看作一个块元素咯。不过,上面例子中给 <html> 设置的 border,位置好像不太对劲儿,纵向一直延续到底了。这个嘛,我还不知道怎么解释,没查到资料。但鉴于一般也没人会给 <html> 设置 border,姑且先搁置了吧。这里有一篇简明的文章,探讨本节的问题。
<html> 和 <body> 上的 CSS
在 <html> 上应用 CSS 的机会并不多。而在 <body> 上,最重要的应用就是设置背景了。在 CSS2 中,不能在 background 属性中指定两个图片。所以以前有在<html> 中指定另一个背景图片这样的应用。当然,除非为了兼容古代 IE,否则已经没必要这么做了。此外,前面提到一般浏览器都会给 <body> 加上 margin。有时候想要让内部元素紧贴窗口边界,可以通过margin: 0来重置掉这一设置。另外一个在 <html> 或 <body> 上设置 CSS 的情景,是让子元素继承样式。比方说设置全局字体样式,“*”选择器杀伤力可能有点大。可以用 html 选择器加上继承:?
相关文章推荐
- 使用HTML <frameset>元素制作导航网页
- html中可以使用在块级元素<body>中的元素
- 一起来看 HTML 5.2 中新的原生元素 <dialog>
- html <meta>元素的常用方法
- 使用java正则表达式过滤HTML ,获取<body>标签中的内容解决思路
- html系统学习之二 <样式,锚>
- HTML <EM>强调标签元素
- 【HTML】 向网页<Title></Title>中插入图片以及跑马灯
- 静态网页,JS代码 统计网站访问量<也支持html>
- HTML中文件上传时使用的<input type="file">元素的样式自定义
- html中<html><body><script>的区别
- 网页设计中列表标记<lu>如何自定义样式?
- HTML学习---------1.7 <body>标签
- HTML标签天天练6--<frameset><frame><iframe>网页框架
- MSChart<2> 柱状图绘制及其样式
- html表格实战<<简单的网页布局>>
- HTML之——<meta> 元素是什么
- <body>与<frameset>元素不能共用
- HTML(2)——<p></p>段落元素定义标签
- html 点击<a>元素后颜色的变换