html内部样式表body,⽹页中的body和html元素及其样式
HTML 中的
和 元素，不知道你有没有注意过。⼀个作为 HTML 内容部分的⽗元素，⼀个作为整个⽹页的根元素，应⽤到它们上的样式表有什么区别，⼜究竟会影响到⽹页上的哪⼀部分呢？
最近写新主页，遇到了⼀些⿇烦，于是对该问题做了⼀些研究。
body {
display: block;
margin: 8px;
html横向滚动条样式
}
这两条告诉了我们什么呢：
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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。