在HTML中开始布局的最常见方法之一是：
<html>
<head>...</head>
<body>
<div id="wrapper">
<div id="container">
...
</div>
</div>
</body>
</html>这就是ol'double-wrapped div布局技术。 但是，由于我们已经有了html和body元素，因此div元素在许多情况下可能是多余的。 因此，为了找出CSS样式是否可以像我们的努力包装器一样应用于html和body元素，我在FireFox 3，Safari 3.2，Opera 9.6和Internet Explorer 6、7和8.这是我发现的。
您可以在html和body元素中添加填充，并且该填充在所有经过测试的浏览器中均有效。 但是，边界是另外一个故事。 虽然您可以在所有经过测试的浏览器中为html元素添加边框，但IE6和7仅允许使用实线边框。 而且，无论可见多少内容，IE6都会在整个视口周围扩展边框，即使滚动条的右侧也是如此。
在html元素中添加边距在所有经过测试的浏览器中均可使用，但IE6除外，IE6会忽略它。 html或body元素上的背景颜色将覆盖整个视口，而不考虑边距。
我发现的一个怪癖是，如果您在html元素上具有背景图像以及顶部空白，则Safari和IE7会忽略该空白并从视口的左上角开始显示背景。 Firefox Opera和IE8会像正常元素一样在空白区域内显示背景图像。 所有浏览器都注意body元素上的空白并正确放置背景图像。
如果您尝试一些疯狂的CSS，例如绝对定位html元素，您会发现它实际上在Opera，IE7和8中都能正常工作。但是，Firefox和IE6会忽略它，并且Safari会非常混乱并显示混乱。
那有什么用呢？ 将背景图像添加到html和body元素中的效果很好，您可以使用它代替仅Safari当前支持的多个背景图像。 SitePoint书中的一种解决方案CSS CSS Anthology使用了这种技术。
您会很高兴地注意到，将单个固定宽度的列居中很容易：
html {
background-color: #333;
}
body {
background-color: #fff;
width: 750px;
margin: 0 auto;
}上面的代码将在所有经过测试的浏览器中正常运行。
但是有一个大难题 ：如果您需要对body元素内的元素使用绝对或相对定位。 我假设由于默认情况下所有元素都从body元素获取定位上下文，因此，如果我将body元素居中，则默认定位上下文应进行相应调整。 我错了！ 默认的定位上下文固定在视口中； 您必须添加position:relative; 以body样式来创建新的定位上下文：
body {
position: relative;
background-color: #fff;
width: 750px;
margin: 0 auto;
}令人耳目一新的是，这在所有经过测试的浏览器中都是一致的。
From: https://www.sitepoint.com/styling-the-html-and-body-elements/