应用于整个 HTML 的 BODY 标记的背景颜色 [重复]答案

【问题标题】：Background-Color of BODY tag applied to the whole HTML [duplicate]应用于整个 HTML 的 BODY 标记的背景颜色 [重复]
【发布时间】：2013-07-23 09:43:26
【问题描述】：

我对 html 中 body 标记的大小感到困惑。

我的代码如下：

<body>

</body>

 body{
        padding: 0px;
        height: 100px;
        background-color: #e5e5e5;
    }

为什么背景会覆盖整个页面？，我以为它应该只覆盖100px，

请给我解释一下，谢谢你的帮助！

【问题讨论】：

@seemly：问题编辑无效，您可以查看问题历史记录，OP 询问为什么实际上将背景应用于整个页面。
@seemly，试着理解这个问题。他想问为什么 Bg-color 会应用到整个页面。坦率地说，aashnisshah 没有回答这个问题，它偏离了 OP 寻求的答案
对不起，我的英语很差！！！
没关系。我们是程序员，不是莎士比亚的
添加边距：0；风格到身体，然后就可以了

标签： html css

【解决方案1】：

这确实令人困惑，但它在 CSS 2.1 规范中指定，子句 14.2 Background：如果 background-color 的计算值是 transparent 并且 background-image 的计算值是 none 对于 @ 987654327@ 元素（默认情况下），浏览器必须改为使用 body 元素的背景属性的计算值，并且不得为 body 渲染背景（即使其透明）。也就是说，如果html 缺少自己的背景，body 背景会神奇地变成html 背景——这只会影响背景属性，而不影响body 元素的真实高度。

我还没有看到这个奇怪的规则的任何理由，它规定了一种“反向继承”。但它在 CSS 2.1 中明确规定并被浏览器应用。

正如其他答案中所解释的，您可以通过在html 上设置背景（以便body 背景真正应用于body）或使用包装器元素，使您的内容具有特定高度的背景在body 内部并在其上设置高度（因为特殊规则仅适用于body）。

感谢 Anne van Kesteren，当我在 WHATWG 邮件列表中询问这个问题时，她指出了 CSS 规范。（我以为我对 CSS 2.1 了如指掌，但实际上并没有。☺）

【讨论】：

这是对问题真正原因的唯一真实答案和解释。这个答案应该是公认的！
另外，在 2009 年之前的某个时候，这种行为对 HTML 和 XHTML 文档的规定有所不同，旧浏览器也有这种行为，但后来规范发生了变化：groups.google.com/forum/#!topic/mozilla.dev.tech.css/…
@Jukka 谢谢你，我看了，但我不明白什么是画布！，你能帮我解释一下吗？
刚刚重温了这个我去年标记为重复的问题，以及您的答案。此行为可能与在 body 元素上定义的 background 和 bgcolor 表示属性有关。此外，您使用 U+263A WHITE SMILING FACE 可以很好地缓解如今风靡一时的彩色位图表情符号。

【解决方案2】：

body 是一个特殊的 HTML 标签，通常覆盖整个 HTML 页面。请尝试以下操作：

<body>
    <div id="content">
        Content goes here
    </div>
</body>

伴随它的 CSS 将是：

body{
    /* whatever body related codes you'd like to use go here */
}

#content{
    padding: 0px;
    height: 100px;
    background-color: #e5e5e5;
}

【讨论】：

这里body元素的高度设置为100px，问题是为什么它的背景仍然应用于整个页面。
body 元素不通常覆盖视口。背景问题是 CSS 2.1 规范中单独描述的特殊情况：w3.org/TR/CSS21/colors.html#background

【解决方案3】：

许多 Web 开发人员不了解将样式应用于 body 元素与 html 元素之间的区别。大多数时候，这些作者只会将样式应用于 body 元素。如果这还不够，他们会在 html 和 body 上发送各种样式的垃圾邮件，直到页面看起来正确为止。

这种混乱是可以理解的。一开始，两者的处理方式相似，将背景颜色等属性应用于正文标签，影响整个页面。

编辑：为了简化事情，我添加了一个小提琴来演示背景颜色是如何应用的。因此，如果您为主体指定背景颜色并且您不要希望它传播到整体页面您必须为 HTML too

指定背景颜色

FIDDLE

CSS

html{
    background-color:yellow;
}
body{
        padding: 0px;
        height: 100px;
        background-color: red;
    }

【讨论】：

这没有回答问题（为什么body背景应用于整个页面）。
@JukkaK.Korpela，有时像这样的琐碎事情最好不要解释。现在，如果我们开始解释“为什么茶最好是热的？”，我们不会坚持到一天结束，不是吗？开玩笑的哥们。坦白说，我不知道。 :)

【解决方案4】：

您应该明确指定background color for the html tag（浏览器会自动添加它），否则body 的背景会遍布整个文档。

【讨论】：

这并不能回答“为什么”的问题。
正文被视为 html（因为它是文档的图形表示，html 包含其他内容：
）所以除非显式将 css 属性设置为，否则它将像整个页面一样
这似乎是正在发生的事情，但 HTML 或 CSS 规范中的解释或借口是什么？这只发生在背景上。例如，如果您在 body 上设置边框，它会围绕 body 元素的框绘制。