「译」理解CSS中的HTML和BODY元素

原文地址：Understanding the HTML versus BODY Element in CSS
原文作者：gavin kistner
本文永久链接：https://segmentfault.com/a/1190000044865003
译者：Fw恶龙
校对者：Fw恶龙

概括

许多 Web 开发人员不理解将样式应用于body元素与html元素之间的区别。大多数时候，他们只会将样式应用于body元素；当这还不够时，他们会在html和 body上应用各种样式，直到页面表现看起来正确为止。

这种困惑是可以理解的。最初，两者的处理方式类似，将bgcolor等属性（现在已弃用）应用于body标记，从而影响整个页面。

本文试图帮助 Web 开发人员充分理解这两个元素在现代 Web 浏览器中的使用方式。

首先，让我们看看块级元素在包含内容时的行为：

从上面我们可以看到，没有特定高度的块级元素会自动增长以适应其内容。当应用高度时会发生什么？这取决于CSS overflow属性的值

与接下来讨论相关的是 overflow:auto。看看它是如何让你在任何块级项目上显示滚动条的吧？

在HTML页面上，当有足够的内容时，页面的一侧便会出现滚动条。这个滚动条是从哪里来的？魔法吗？UI小部件之间的邪恶幽会？也许吧。或者它可能只是一个隐式CSS规则导致的结果

html { overflow: auto }

“但是html元素没有高度!”

你困惑地喊道！

“如果它是一个没有特定高度的块级元素，它如何生成滚动条?”

html元素有点特殊。它的高度和宽度由它所在的窗口/框架决定。当你增加窗口宽度时，html元素的固定宽度也随之增加；当窗口变高时，html元素的高度也随之增加。

图片会更直观一些，让我们看看html元素在设置了overflow: visible时会是什么样子：

希望这个图例对你有所帮助，而不是让你更加困惑。我们可以看到当主体内容body溢出容器时，html元素（红色）是如何移动到窗口边缘的。当内容太高时，html元素负责显示“页面”的滚动条。

这对你来说意味着什么？有几件事：

如果您是一个喜欢固定宽度且居中显示页面的设计师，则可以通过在body标签上设置 width，再将其居中margin: 0 auto显示（栗子）
因为body元素默认情况下position: static，所以如果给子元素设置height:100%导致其高度为html元素高度的 100%，而不是body元素的高度。因此，如果您希望某些东西与主体一样高，请使用
```
body { position: relative }
```
希望它可以帮助您准确理解margin 、padding 和 border应用于html和body元素时将如何渲染