html- body,CSS: HTML 和 Body 的区别

在 CSS 中， 和

的区别往往被忽略，全局样式或者定义在 上，或者定义在 上。实际上，两者是有区别的，不论是 CSS 老鸟还是新手，都应该了解。

HTML 和 Body 如何关联

根据标准定义， 是文档的根元素，

、 是 唯一的两个子元素。按照规范， 才是和 相对照、需要加以区别的元素。

因此， 和

是父子关系。在 HTML 文档中，:root 选择符对应 元素。

:root {

}

html {

}

需要注意的是，:root 选择符(伪类)的优先级大于 html 选择符：(0, 0, 1, 0) vs (0, 0, 0, 1)。

哪些全局样式应该应用在 HTML

html {

font-size: 62.5%;

}

body {

font-size: 1.4rem; /* =14px */

}

h1 {

font-size: 2.4rem; /* =24px */

}

古怪的 background-color

CSS 中有一些古怪的行为，将 background-color 应用到

以后，即便 里的元素没有占满视口，背景颜色也会蔓延到整个视口。

给 html 设置 background-color 可以解决这个问题。

height: 100%

如果

及其子元素的高度需要设置为窗口高度时， 元素上也需要添加：

html,

body {

height: 100%;

}

哪些全局样式应该应用在 Body

早期的规范中，

有以下行内属性：

background

bgcolor

marginbottom

marginleft

marginright

margintop

text

这些行内属性对应的 CSS 样式应该应用在

。

Inline Attribute

CSS Property

总结

本文列举了一些 和

在 CSS 中的区别，在 JavaScript 中同样存在区别，例如 html 对应 document.documentElement、body 对应 document.body。

了解二者的区别可以帮助我们更有效的编写 CSS。欢迎补充。

参考链接

相关

Related Posts

HTML5对比HTML4带来的新变化

HTML5入门 HTML5是HTML的最新版本，目标是更好地开发网络应用程序。 HTML5比HTML4拥有更简洁的语法并且提供了更多新的特性。 本文将对HTML5做一个大体的介绍。 HTML5能做什么？ 1. 离线存储 HTML5可以让你的WEB应用程序离线也能运行,它提供了一个称作“应用程序缓存"的离线存储功能，因此即使当用户离线，浏览器仍然能够访问到它所需的文件。 这些文件可以是HTML，CSS，Javascript…

IE6,IE7和8浏览器兼容HTML5标签的解决方案

html5大行其道的时代已经到来。如果你还在等待浏览器兼容，说明你已经与web脱节几条街了。当然，这得益于移动客户端的蓬勃发展。如果还在纠 结于，是否应该掌握html5和css3技术时，请狠狠的抽自己几个嘴巴，然后，苦学吧！因为前端的春天已经到来，而且不止一个春天。如果你不信，我只能 说：爱信不信！ 下面我们来看一个标准的html5标签结构：(我这里只是说标签，其它概不涉及)

CSS学习之外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 外边距合并 外边距合并(叠加)是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。 简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图： 亲自试一试 当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开)，它们的上和/或下外边距也会发生合并。请看下图： 亲自试一试…