与 body 相比，将 css 规则应用于 html 有什么区别？答案

【问题标题】：What is the difference between applying css rules to html compared to body?与 body 相比，将 css 规则应用于 html 有什么区别？
【发布时间】：2011-10-08 01:12:53
【问题描述】：

我看不出两者之间的区别：

html {
    background: #f1f1f1;
}

和

body {
    background: #f1f1f1;
}

有什么解释吗？

【问题讨论】：

相关（与标题，无论如何）：stackoverflow.com/questions/4565942/…

标签： html css

【解决方案1】：

有人在这里写的总是 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 box-model 属性（或者根本不修改它，只是为了安心）。创建内部元素（宽度可能为 100%）并改为使用它。

【讨论】：

【解决方案2】：

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

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

例如，YUI 重置选择在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/#special-backgrounds

根元素的背景变成了元素的背景画布及其背景绘画区域延伸到覆盖整个画布，尽管任何图像的大小和位置都相对于根元素，就好像它们是单独为该元素绘制的一样。（其他也就是说，背景定位区域被确定为根元素。）如果根的“背景颜色”值为“透明”，则画布的背景颜色取决于 UA。根元素不再次绘制此背景，即其背景的使用值为透明的。

还有：

对于根元素是 HTML HTML 元素 [HTML401] 或一个 XHTML html 元素 [XHTML11]：如果计算值根元素上的“背景图像”为“无”，其 “背景颜色”是“透明”，用户代理必须改为从中传播背景属性的计算值元素的第一个 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/

【讨论】：

【解决方案3】：

虽然body 和html 通常可以被同等对待，但它们不是相同的东西。 body 可以有边距、填充和边框，并且可以相对于html 元素移动。我有时会使用正文边距和内边距在浅色背景上制作一个白色“页面”，它的打印效果与外观相同。

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

相关的 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 上添加边距/填充/边框，如果您愿意。我相信你知道这一点，但你的第二句话可能听起来像是在说你不能那样做。
@thirtydot - 是的，很好的说明，谢谢。我不这样做，但我可以这样做。

【解决方案4】：

通常不应该有任何区别，因为这些元素都应该占据整个屏幕。这就像在其他 div 中有一个 div。但我认为设置 body 标签的样式更正确，因为 html 并不是布局的一部分。

【讨论】：

给你的身体一些余地，你会看到不同。 html { background-color: green; } body { padding: 2em; margin: 2em; background-color: yellow; }

【解决方案5】：

html 是 body 的父级。查看差异的一种方法是：

html {
    overflow: scroll;
}


body {
    overflow: scroll;
}

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

【讨论】：

我相信，即高度也不同（实际浏览器窗口高度（html）与文档高度（body））。不确定这是否会在不使用 javascript 的情况下发挥作用...