个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
25
4
我一直在研究html根元素和body子元素的方式在 HTML 文档中进行交互。 CSS 2.1 规范中的以下摘录指出在盒子模型中，边距是透明的，这是我们都知道的。
http://www.w3.org/TR/CSS21/box.html#mpb-examples
The margins of the LI boxes are transparent — margins are always transparent — so the background color (yellow) of the UL padding and content areas shines through them.
然而，让我好奇的是，如果边距是透明的，那么如果我给根元素，即html元素，一个margin，这个margin要透出来默认的浏览器用户代理 Canvas 颜色。然而，情况并非如此，如图所示下面的片段。顶级 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 元素，包含属于 body 元素的粉红色内容。
CSS 2.1 规范中是否指定了此行为？如果是这样，那么在哪里？我似乎无法在任何地方找到它。
谢谢。
编辑:
正如 BoltClock 在下面指出的那样，CSS 2.1 的第 14.2 节中提到了这种行为规范(并继承到 CSS3 规范的背景和边框模块)。那与其他 CSS 元素不同的是，html 元素的背景还覆盖了边距区域。
但是，正如 BoltClock 在下面也指出的那样，该部分还指定它是被认为更适合在 body 元素上设置背景颜色比在 html 元素上。以下是 CSS 2.1 规范的相关摘录:
For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.
所以让我们尝试看看如果在我们的原始 HTML 中我们评论会发生什么从 html 元素的样式属性中提取背景 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 元素我们指定的边框是实心和黑色)，以及主体的边距元素以及显示为单个粉红色区域的正文内容区域(尽管我们可以为 body 元素指定一个背景，它会覆盖当然是内容区)。
无论如何，这项调查是出于纯粹的利益而进行的。出于所有实际目的，您通常不会为 html 设置任何内容元素，并且只允许规则“* { margin: 0; border: 0; padding: 0; }”落入 html 和 body 元素并应用背景body 元素或包含在 body 元素内的包装器 div 中。
问候。
最佳答案
是的，它在 section 14.2 中:
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.
在section 3.11 of the Backgrounds and Borders module中再次提到，它取代了 CSS2.1 的这一部分，所以这个特定的行为保持不变。
既然您提到了 html 和 body 元素之间的交互，请注意这两个链接还包含有关在呈现 HTML 文档时在某些情况下如何将 body 背景传播到根元素的详细信息。对于那些好奇的人，所有浏览器都严格遵循这一点；它基于在 body 元素上设置 background 和 bgcolor 属性时用背景绘制整个 Canvas 的传统行为，因此它基本上是用术语指定的传统 HTML 行为CSS(如果没有别的，保持与遗留网站的向后兼容性)。
关于margin - CSS 2.1 规范 : pathological case: html root element margin color，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19748689/
25
4
0
这个词有标准用法吗？ 来自 Wikipedia : In computer science, pathological has a slightly different sense with rega
我有一个简单的凸问题，我正在尝试加快解决速度。我正在求解 argmin (theta) 其中 theta 和 rt 为 Nx1。 我可以使用cvxpy轻松解决这个问题 import numpy as
我一直在研究html根元素和body子元素的方式在 HTML 文档中进行交互。 CSS 2.1 规范中的以下摘录指出在盒子模型中，边距是透明的，这是我们都知道的。 http://www.w3.org/
我是一名优秀的程序员,十分优秀！