Question

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

我的代码如下：

<body>

</body>

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

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

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

Answer 1

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

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

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

感谢Anne van Kesteren，当我在WHATWG邮件列表中询问时，他指出了CSS规范。（我以为我心里熟悉CSS 2.1，但实际上并没有。☺）

Answer 2

正文是一个特殊的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;
}

Answer 3

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

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

编辑：为了简化，我添加了一个小提琴来演示如何应用背景颜色。所以，如果你指定了身体的背景颜色，你不要希望它传播到整体页面必须指定HTML 的背景颜色

FIDDLE

CSS

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

Answer 4

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

背景 - BODY标签的颜色应用于整个HTML

4 个答案: