将css规则应用于html与应用于body之间的区别是什么?

我看不出两者的区别:

html {
    background: #f1f1f1;
}

和

body {
    background: #f1f1f1;
}

任何解释吗?

没有真正的区别(如果您只是在谈论在哪里应用background，否则BoltClock对另一个问题的回答更合适)。html是一个元素，就像body一样。

都是有效的选择，并且都可以在所有常见的浏览器中工作。

例如，YUI Reset选择在html元素上设置background而不是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/特殊背景

根元素的背景成为画布及其底画区域延伸到覆盖整个画布，尽管任何图像的大小和位置都相对于根元素，就好像它们是单独为该元素绘制的一样。(换句字，背景定位区域确定为为根元素)。如果根的' background-color '值是' transparent '，则画布的背景颜色依赖于UA。根元素不需要重新绘制此背景，即其背景的使用值为透明。

对于根元素是HTML HTML元素[HTML401]或一个XHTML html元素[XHTML11]:如果计算值根元素上的' background-image '是' none '，它的"background-color"是"transparent"，用户代理必须这样做从中传播背景属性的计算值元素的第一个HTML BODY或XHTML BODY子元素。使用的值BODY元素的背景属性的初始值，并且将传播的值视为在根元素。建议HTML文档的作者指定BODY元素的画布背景，而不是HTML
元素。

这里展示了这一墙文字的意思:

background on just body: http://jsfiddle.net/hhtzE/
background on html and body: http://jsfiddle.net/hhtzE/1/
background仅html: http://jsfiddle.net/hhtzE/2/

虽然body和html通常可以被视为相同，但它们不是相同的东西。body可以有边距、内边距和边框，并且可以相对于html元素移动。我有时会使用body margin和padding在浅色背景上创建一个白色的"page"，这样打印出来的效果就和看起来一样了。

请看下面这个简单的例子，它展示了两者可以有不同的背景颜色。

相关的CSS是我在nomulous的回答中评论过的:

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

还有:root元素，因为不是所有的浏览器(cough.ie.cough)都将html元素作为DOM的根。

html是body的父元素。查看差异的一种方法是:

html {
    overflow: scroll;
}

body {
    overflow: scroll;
}

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

有人在这里写道，总是100%的高度，但这不是真的!

尝试做(在FF4上测试):

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

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

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

到目前为止，最好的做法是同时使用背景色、字体等。只要你每次写:

body{}

改为:

body,html{}

不要在<body>和<html>上使用任何CSS框模型属性(或者完全不修改，只是为了安心)。创建内部元素(可能宽度为100%)，并使用它

通常情况下不应该有任何区别，因为这些元素都应该占据整个屏幕。这就像在另一个div里面放一个div，但我认为用body标签来定义样式更正确，因为html并不是布局的一部分。

相关内容

最新更新

热门标签：