js设置body样式_设置html和body元素的样式
js 设置body样式
在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书籍中的⼀种解决⽅案使⽤了这种技术。
您会很⾼兴地注意到，将单个固定宽度的列居中很容易：
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;
}
令⼈⽿⽬⼀新的是，这在所有经过测试的浏览器中都是⼀致的。
html横向滚动条样式翻译⾃:
js 设置body样式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。