http://jsfiddle.net/julien_c/GmAL4/
我发现如果你应用CSS背景body,它会占用整个页面(无论实际的高度或宽度body是多少).
但是,如果应用CSS背景都html和body为背景body 不占用整个页面.
这种差异是否存在预期的行为？
如何叠加两个全屏背景(例如,背景颜色和半透明图像？)
当应用于同一HTML文档时,这三个规则有何不同？
html {
color: black;
background-color: white;
}
body {
color: black;
background-color: white;
}
* {
color: black;
background-color: white;
}
所以我有一个直接放在体内的元素:
<body>
<div id="header">Some stuff...</div>
Other stuff...
</body>
以下是使用的CSS:
body{
text-align:center;
}
#header{
margin:auto;
}
因此#header div设置为100%宽度(默认值)并居中.问题是,窗口边框和#header元素之间有一个"空格"...喜欢:
| |----header----| |
^window border ^window border
我尝试用javascript调整它,它成功地将元素大小调整到确切的窗口宽度,但它并没有消除"空间":
$('#header').width($(window).width());
一个解决方案似乎是添加以下CSS规则(并保持上面的javascript):
#header{
margin:auto;
position:relative;
top:-8px;
left:-8px;
}
在我的浏览器中,这个"空间"是8px - 但我不确定在所有浏览器中是否相同？我在Ubuntu上使用Firefox ...
那么摆脱这个空间的正确方法是什么 - 如果它是我上面使用的,那么所有的浏览器都是一样的吗？
我没有看到以下区别:
html {
background: #f1f1f1;
}
和
body {
background: #f1f1f1;
}
任何解释？
根据规格:
建议HTML文档的作者指定BODY元素的画布背景而不是HTML元素.
但它没有说它有什么优势.为什么规范推荐这个？
PS当我看到额外的滚动条时身体高度为100vh时,它突然出现在我的脑海中:是不是简单地将背景赋予html元素呢？
我可以在以下块之一中设置全局CSS属性:
* {
}
html {
}
body {
}
他们之间有什么区别？每个设置如何影响页面样式？
当我设置font-family或者color,我在哪里放置它？