Question

我没有看到：

之间的区别

html {
    background: #f1f1f1;
}

和

body {
    background: #f1f1f1;
}

有任何解释吗？

Answer 1

没有真正的区别（如果您只是在谈论应用background的位置，否则BoltClock's answer to this other question更合适。 html是一个元素，就像body一样。

两者都是有效的选择，两者都适用于所有常见的浏览器。

例如，YUI重置，选择在background元素而不是html上设置body：
http://yui.yahooapis.com/3.3.0/build/cssreset/reset.css

这需要您在background上设置html，例如，请参阅：can't change body background color using CSS reset

请参阅： http://dev.w3.org/csswg/css3-background/#special-backgrounds

根元素的背景成为背景帆布及其背景绘画区域延伸至覆盖整个区域画布，虽然任何图像的大小和位置相对于根元素就好像它们仅为该元素绘制一样。（其他单词，背景定位区域确定为根如果root的'background-color'值是'透明'，那么 canvas的背景颜色依赖于UA。根元素没有再次绘制此背景，即其背景的使用值为透明的。

和

对于其根元素是HTML HTML元素[HTML401]或一个XHTML html元素[XHTML11]：如果计算的值为根元素上的'background-image'是'none'及其 'background-color'是'透明'，用户代理必须代替从中传播背景属性的计算值 element的第一个HTML BODY或XHTML body子元素。使用的值该BODY元素的背景属性是它们的初始值，并且传播的值被视为在。上指定它们根元素。建议HTML文档的作者指定 BODY元素的画布背景而不是HTML 元件。

这里的文字墙在这里展示了什么：

background

body

http://jsfiddle.net/hhtzE/

background

html

body

http://jsfiddle.net/hhtzE/1/

background仅限html：http://jsfiddle.net/hhtzE/2/

Answer 2

html是正文的父亲。一种看待差异的方法是：

html {
    overflow: scroll;
}


body {
    overflow: scroll;
}

你会看到有两组嵌套的滚动条，一组属于html，另一组属于body。

Answer 3

虽然body和html通常可以被视为相同，但它们不相同。 body可以有边距，填充和边框，并相对于html元素移动。我有时会使用身体边距和填充在浅色背景上制作白色“页面”，并且打印的内容与它看起来相同。

请参阅this fiddle以获取一个简单示例，其中显示两者可能具有不同的背景颜色。

相关的CSS就像我在名单上回答的那样评论：

html {
    background-color: #ffffc0;
}
body {
    padding: 2em;
    margin: 2em;
    background-color: white;
    border: 1px solid black;
}

还有:root元素，因为并非所有浏览器（cough.ie.cough）都将html元素视为DOM的根。

Answer 4

有人在这里写道，总是100％高度，但事实并非如此！

尝试做（在FF4上测试）：

html{
    background:yellow;
}
body{
    background:red;
    height:100px;
}

仅当<body>没有颜色设置时，

<html>颜色会影响<html>颜色。这里最烦人的事情是当<body>有颜色而<html>没有颜色时，某些浏览器版本会遇到带有边距的最后一个直接子块元素的问题。元素和边距为<html>颜色后将切割颜色。设置<html>颜色时始终为真。

另一方面，当设置<html>背景时，<body>可以具有例如边距。这简直就是一团糟。

到目前为止，最佳做法是将背景颜色，字体等应用于两者。只要你每次写作：

body{}

将其更改为：

body,html{}

不要在<body>和<html>上使用任何CSS盒子模型属性（或者完全保留它，只是为了让您高枕无忧）。创建内部元素（可能宽度为100％）并改为使用它。

Answer 5

通常不应该有任何区别，因为这些元素都应该占据全屏。这就像在其他div中有一个div。但我觉得设计body标签更为正确，因为html实际上不是布局的一部分。

将hss css规则与body相比有什么区别？

5 个答案: