13

I am confused about size of body tag in html.

I have a tough code as follows:

<body>

</body>

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

Why does background cover all of the page?, I thought it should only cover 100px,

Please explain this for me, thank for your help!

4

4 回答 4

19

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

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

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

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

于 2013-07-23T18:15:20.187 回答
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;
}
于 2013-07-23T09:46:39.333 回答
2

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

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

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

小提琴

CSS

html{
    background-color:yellow;
}
body{
        padding: 0px;
        height: 100px;
        background-color: red;
    }
于 2013-07-23T09:59:44.967 回答
1

您应该为标签明确指定背景颜色html（因为浏览器会自动添加它），否则，背景body会遍布整个文档。

于 2013-07-23T09:50:39.847 回答