Question

body {
  background-color: red;
}

<body>
  <div>Hello World!</div>
</body>

因此background-color: red;适用于整个页面高度，但当我检查页面时，正文的高度仅限于包含 Hello World！的div。

有人请解释为什么会这样发生。

Answer 1

主要原因是因为HTML取background-color BODY以来：

根元素的背景成为背景画布并覆盖整个画布[...]

因为background-color的默认HTML为transparent，所以它将从BODY获取一个HTML。无论是对BODY和BODY元素应用颜色，您都会看到html { background-color: blue; } body { background-color: red; }背景不再覆盖整个页面。

＆＃13;

<html>

<body>
  <div>Hello World!</div>
</body>

</html>

＆＃13;

background-position

＆＃13;

根元素的背景成为背景   帆布和覆盖整个画布，锚定（为   BODY）与它的情况相同   仅为根元素本身绘制。根元素没有   再次画这个背景。

但是，对于HTML文档，我们建议作者指定   HTML元素的背景而不是transparent元素。对于   其根元素是HTML＆＃34; HTML＆＃34;元素或XHTML   ＆＃34; HTML＆＃34;已为background-color计算值的元素   用户代理必须是none和background-image {{1}}   而是使用背景属性的计算值   元素的第一个HTML＆＃34; BODY＆＃34;元素或XHTML＆＃34; body＆＃34;元素孩子的时候   绘画画布背景，不得画背景   对于那个子元素。这样的背景也必须固定在   如果它们仅为根绘制，它们将是相同的点   元件。

_{来自W3 - 14 Colors and Backgrounds。}

Answer 2

它实际上是相当逻辑的。首先，<html>和<body>标记是网页中必需的标记。如果<html>标记包含所有<html>代码，则<body>标记包含所有内容。

考虑基本HTML文档的这种标准结构：

<!DOCTYPE html>
<html lang="en">

  <head>
    <!-- Metadata and such -->
  </head>

  <body>
    <!-- Where the content begins -->
  <body>

</html>

规范定义为文档的根元素，我们可以清楚地看到在上面的例子中：元素是所有其他元素的最高级别。因为除了可以继承样式的级别之外没有更多的级别。

从那里开始，构成直接落在里面的两个元素。实际上，规范直接定义，因为那些是唯一需要区分的两个元素。

所以，这里的底线是文档的根元素，其中包含一个后代。实际上，CSS中有一个：root选择器。这些目标完全相同。

我们很容易认为我们希望全面继承的任何样式应该直接应用于<html>，因为它是文档的根元素。 <html>取代层次结构中的<body>，因此它必须包含所有全局样式。

但事实并非如此。实际上，以下内联属性最初已分配给规范中的<body>：

背景
BGCOLOR
marginbottom
marginleft
marginright
margintop
文本

背景颜色

在CSS中有一个奇怪的事情，background-color上的<body>会泛滥整个视口，即使元素本身的指标不覆盖整个区域。除非在html元素上设置background-color，否则它不会。

如果洪水是目标，那么只需将其设置在html元素上即可。

Answer 3

＆＃13;

.some{

    background-color: red;

}

＆＃13;

<div class="some">Hello World!</div>

＆＃13;

试试这个，就像你给身体颜色一样，整个网页都会被着色

Answer 4

你在inspect中看到的高度是min-height这是相等高度的元素div，背景颜色变化max-height这等于100％他的父母（html）。

例如：

更改min-height并运行检查并查看结果：

body {
   background-color: red;
   min-height: 200px;
}

<div>Hello World!</div>

所以，你看到检查高度改变200px;但是红色覆盖整页。

Answer 5

正文表示浏览器中显示的所有页面。因此，您只想为div提供颜色，您可以使用id或类为该潜水提供样式。如第一个答案。

<body>
    <div class="some">Hello World!</div>
</body>

.some{
   background-color: red;
}

或

<body>
    <div id="some">Hello World!</div>
</body>

#some{
   background-color: red;
}

Answer 6

CSS技巧在优点link中有相关的帖子。似乎身体样式被扩展为html，因为：

html是文档的根元素，其中body是后代包含在其中。实际上，CSS中有一个：root选择器。这些瞄准完全相同的事情

给整个页面的身体提供背景颜色。为什么？

6 个答案: