Question

我一直在调查html根元素和body子元素的方式在HTML文档中进行交互。 CSS 2.1规范中的以下摘录说明盒子模型中的边距是透明的，我们都知道。

http://www.w3.org/TR/CSS21/box.html#mpb-examples

LI框的边距是透明的 - 边距总是如此透明 - 所以UL填充的背景颜色（黄色）和内容区域通过它们闪耀。

然而，令我好奇的是，如果保证金透明，那么如果我给予根元素，即html元素，一个边距，这个边距应该显示出来默认的浏览器用户代理画布颜色。但是，情况并非如此所示下面的片段。顶级html元素的边缘似乎利用了与其背景属性中指定的颜色相同的颜色。这是代码：

<!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元素。

HTML element and BODY element interactions

是否在CSS 2.1规范中的任何位置指定了此行为？如果是这样，那么在哪里？我似乎无法在任何地方找到它。

感谢。

修改

正如BoltClock在下面指出的那样，CSS 2.1的第14.2节中提到了这种行为规范（并继续使用CSS3规范的背景和边框模块）。那是的，与其他CSS元素不同，html元素的背景也涵盖了边缘区域。

但是，正如BoltClock在下面指出的那样，该部分也指明了它被认为更适合在身体元素上设置背景颜色比在html元素上。以下是CSS 2.1规范的相关摘录：

但是，对于HTML文档，我们建议作者指定 BODY元素的背景而不是HTML元素。对于其根元素是HTML“HTML”元素或XHTML的文档 “html”元素，计算出'transparent'的值 'background-color'和'none'代表'background-image'，用户代理必须而是使用背景属性的计算值 element的第一个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>

结果如下：

HTML element and BODY element interactions

正如我们所看到的，身体元素的粉红色背景传播到了整个html元素的框，从而覆盖html元素的边距，html 元素的边框（不是粉红色而是黑色，因为对于html元素我们指定的边界是实心和黑色），以及身体的边缘元素和身体的内容区域，显示为一个粉红色的区域（虽然我们可以为body元素指定一个背景，它将覆盖当然是内容区域）。

无论如何，这项调查是因为纯粹的兴趣而进行的。出于所有实际目的，您通常不会为html设置任何内容元素，只允许规则“* {margin：0; border：0; padding：0;}” 要落到html和body元素并应用背景 body元素或body元素中包含的包装div。

问候。

Answer 1

是的，它在section 14.2：

根元素的背景成为画布的背景并覆盖整个画布，锚定（对于“背景位置”）与在仅为根元素本身绘制时相同的点。根元素不会再次绘制此背景。

在section 3.11 of the Backgrounds and Borders module中再次提到它，它取代了CSS2.1的这一部分，所以这个特定的行为保持不变。

由于您提到了html和body元素之间的交互，请注意这两个链接还包含有关在呈现HTML文档时如何在某些情况下将正文背景传播到根元素的详细信息。对于那些好奇的人来说，所有的浏览器都遵循这个字母;它基于在body元素上设置background和bgcolor属性时使用背景绘制整个画布的传统行为，因此它基本上是用CSS指定的传统HTML行为（以保持向后与其他网站的兼容性。

CSS 2.1规范：病态案例：html根元素边距颜色

1 个答案: