CSS 2.1规范:病态案例:html根元素边距颜色
我一直在研究html根元素和body子元素在HTML文档中交互的方式.CSS 2.1规范中的以下摘录表明,在框模型中,边距是透明的,我们都知道.
http://www.w3.org/TR/CSS21/box.html#mpb-examples
LI框的边距是透明的 - 边距总是透明的 - 因此UL填充和内容区域的背景颜色(黄色)透过它们.
然而,让我好奇的是,如果边距是透明的,那么如果我给根元素,即html元素,一个边距,这个边距应该通过默认浏览器用户代理画布颜色显示.但是,情况并非如下面的代码段所示.顶级html元素的边距似乎使用与其background属性中指定的颜色相同的颜色.这是代码:
<!doctype html>
<html style="margin: 40px; border: 1px solid black; background: green;">
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
* { margin: 0; border: 0; padding: 0; }
</style>
</head>
<body style="margin: 40px; width: 400px; height: 300px; background: pink;">
</body>
</html>
在这里,我们可以看到与html根元素相关的绿色边缘,包含与html根元素相关的黑色边框,包含与body元素相关的绿色边框,包含与body元素相关的粉红色内容.
是否在CSS 2.1规范中的任何位置指定了此行为？如果是这样,那么在哪里？我似乎无法在任何地方找到它.
谢谢.
编辑:
正如BoltClock在下面指出的那样,CSS 2.1规范的第14.2节中提到了这种行为(并且继续使用CSS3规范的背景和边框模块).也就是说,与其他CSS元素不同,html元素的背景也覆盖了边距区域.
但是,正如BoltClock在下面指出的那样,该部分还指出在body元素而不是html元素上设置背景颜色更合适.以下是CSS 2.1规范的相关摘录:
但是,对于HTML文档,我们建议作者指定BODY元素的背景而不是HTML元素.对于其根元素为HTML"HTML"元素或XHTML"html"元素的文档,其中"background-color"的计算值为"transparent",而"background-image"的计算值为"none",则用户代理必须使用在为画布绘制背景时,从该元素的第一个HTML"BODY"元素或XHTML"body"元素子元素计算背景属性的值,并且不得为该子元素绘制背景.如果仅为根元素绘制它们,那么这些背景也必须固定在同一点上.
因此,让我们试着看看如果在我们的原始HTML中我们从html元素的style属性中注释掉背景CSS属性会发生什么,如下所示:
<!doctype html>
<html style="margin: 40px; border: 1px solid black; /* background: green; */">
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
* { margin: 0; border: 0; padding: 0; }
</style>
</head>
<body style="margin: 40px; width: 400px; height: 300px; background: pink;">
</body>
</html>
结果如下:
我们可以看到,body元素的粉红色背景传播到整个html元素的框,因此覆盖了html元素的边距,html元素的边框(不是粉红色而是黑色,因为对于html元素,我们指定的边框是实心的并且身体的边缘元素和身体的内容区域显示为单个粉红色区域(尽管我们可以为身体元素指定背景,当然它将覆盖内容区域).
无论如何,这项调查是因为纯粹的兴趣而进行的.出于所有实际目的,您通常不会为html元素设置任何内容,并且只允许规则"*{margin:0; border:0; padding:0;}"落入html和body元素并应用body元素的背景或body元素中包含的包装div.
问候.
是的,它在第14.2节:
根元素的背景成为画布的背景并覆盖整个画布,锚定(对于"背景位置")与在仅为根元素本身绘制时相同的点.根元素不会再次绘制此背景.
它在背景和边界模块的第3.11节中再次提到,它取代了CSS2.1的这一部分,所以这个特定的行为保持不变.
由于您提到了html和body元素之间的交互,请注意这两个链接还包含有关在呈现HTML文档时如何在某些情况下将主体背景传播到根元素的详细信息.对于那些好奇的人来说,所有的浏览器都遵循这个字母; 它基于在body元素上设置background和bgcolor属性时用背景绘制整个画布的传统行为,因此它基本上是用CSS指定的传统HTML行为(如果没有别的话,保持与遗留站点的向后兼容性).