显示：块内显示：内联 [英] display:block inside display:inline
问题描述
我想了解当CSS display：block 的元素是CSS 的元素的DOM子元素时，会发生什么：display：inline
I want to understand what happens when an element whose CSS is display:block is a DOM child of an element whose CSS is display:inline (so that the block element is a child of an inline element).
这种情况在匿名块框部分的CSS 2.1规范：该示例包括以下规则。 ..
This scenarios is described in the Anonymous block boxes section for the CSS 2.1 specification: the example includes the following rules ...
body { display: inline }
p { display: block }
...和随附的文字说...
... and the accompanying text says ...
BODY元素包含匿名文本的块（C1）
，后面是
块级元素，后面是
另一个块（C2）的匿名文本。
生成的框将是BODY周围的
匿名块框，
包含一个匿名块框在C1附近的
，P块框和
另一个匿名块
The BODY element contains a chunk (C1) of anonymous text followed by a block-level element followed by another chunk (C2) of anonymous text. The resulting boxes would be an anonymous block box around the BODY, containing an anonymous block box around C1, the P block box, and another anonymous block box around C2.
如果您有一个 display：inline 父元素，并且如果此父级具有 display：block 的子级，则该子级的存在似乎使父级近似的行为类似于 display：block ，并忽略它被定义为 display：inline 的事实（因为父类现在只包含匿名和非 -
If you have a display:inline parent element, and if this parent has a child that is display:block, then the existence of that child seems to make the parent nearly behave like display:block, and ignore the fact that it's defined as display:inline (in that the parent now contains nothing but anonymous and non-anonymous block children, i.e. it no longer contains any inline children)?
我的问题是，在这种情况下（有一个显示：block child）那么父类的定义 display：inline 而不是 display：block ？
My question is, in this scenario (where there's a display:block child) then what are the differences between the parent's being defined display:inline instead of display:block?
编辑：我更感兴趣了解CSS 2.1标准，而不是如何和是否各种浏览器实现行为
I more interested in understanding the CSS 2.1 standard than in how and whether various browser implementations behave in practice.
第二个编辑：
在规格中注明。在下面的文档中，第二'块'段的边框围绕整个段落和页面的整个宽度;而第一'内嵌段落的边框在段落内的每一行（即使有多行），并且不超过每行的精确宽度（每行小于页面宽度）。
There's one difference noted in the spec. In the following document, the border for the 2nd 'block' paragraph surrounds the whole paragraph and the whole width of the page; whereas the border for the 1st 'inline paragraph is around each line (even when there are several lines) within the paragraph and no more than the exact width of each line (with each line being shorter than the page width).
<html>
<head>
<style type="text/css">
p.one
{
border-style:solid;
border-width:1px;
display: inline;
}
p.two
{
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<p class="one">Some text. <b>Note:</b> The "border-width"
property does not work if it is used alone. Use the
"border-style" property to set the borders first.</p>
<p class="two">Some text.</p>
</body>
</html>
如果我添加以下样式规则...
If I add the following style rule ...
b
{
display: block;
}
...然后第一个内联段落中的注意：块，它分割段落（根据规范，段落的第一和最后部分现在在一个匿名块）。但是，段落的第一部分和最后一部分的边界仍然是内联风格的边界：因此，仍然不同于 p.one 已声明 display：block 。
... then the "Note:" in the first inline paragraph becomes a block, which splits the paragraph (according to the specs, the first and last part of the paragraph are now in an anonymous block). However, the border around the first and last part of the paragraph are still 'inline'-style borders: and so, still not the same as if p.one had been declared display:block in the first place.
There's a quote from the spec, which says,
在引起
的元素上设置的属性生成匿名块框
仍然适用于框和内容
那个元素。例如，如果在上面的例子中BODY
元素上设置了一个
边框，那么
边框将在C1周围绘制（在行尾打开
）和C2（在行的开头打开
）。
Properties set on elements that cause anonymous block boxes to be generated still apply to the boxes and content of that element. For example, if a border had been set on the BODY element in the above example, the border would be drawn around C1 (open at the end of the line) and C2 (open at the start of the line).
Is the "border-style" property the only type of property where the difference is visible?
推荐答案
/ TR / 2009 / CR-CSS2-20090908 /rel =nofollow noreferrer>规范，我发现您的问题实际上很好回答了：
when i read the spec, i find your question actually quite well answered:
当内联框包含一个块框时，内联框[...]
When an inline box contains a block box, the inline box [...] [is] broken around the block. The [in]line boxes before the break and after the break are enclosed in anonymous boxes, and the block box becomes a sibling of those anonymous boxes.
$ b
<BODY style="display: inline; ">
This is anonymous text before the P.
<P>This is the content of P.</P>
This is anonymous text after the P.
</BODY>
生成的框将是BODY周围的一个匿名块框，包含
The resulting boxes would be an anonymous block box around the BODY, containing an anonymous block box around C1, the P block box, and another anonymous block box around C2.
或在视觉上：
+- anonymous block box around body ---+
| +- anonymous block box around C1 -+ |
| | + |
| +---------------------------------+ |
| |
| +- P block box -------------------+ |
| | + |
| +---------------------------------+ |
| |
| +- anonymous block box around C2 -+ |
| | + |
| +---------------------------------+ |
+-------------------------------------+
现在到您的问题：这不同于< BODY style =display：block;> ？
now to your question: is this different from <BODY style="display: block; ">?
是的，虽然它仍然是4个方框（ 现在是 的匿名块框），规格：
yes, it is. while it is still 4 boxes (anonymous block box around body now being BODY block box), the spec tells the difference:
在生成匿名块框的元素上设置的属性仍适用于[生成的匿名块]框和该元素的内容。 / strong>例如，如果在上述示例中的BODY元素上设置了边框，则将在C1（在行尾打开）和C2（在行开头打开）处绘制边框： / p>
Properties set on elements that cause anonymous block boxes to be generated still apply to the [generated anonymous block] boxes and content of that element. For example, if a border had been set on the BODY element in the above example, the border would be drawn around C1 (open at the end of the line) and C2 (open at the start of the line):
+--------------------------------------
| This is anonymous text before the P.
+--------------------------------------
This is the content of P.
--------------------------------------+
This is anonymous text after the P. |
--------------------------------------+
这不同于< BODY style =display：block;> ：
+--------------------------------------+
| This is anonymous text before the P. |
| |
| This is the content of P. |
| |
| This is anonymous text after the P. |
+--------------------------------------+
这篇关于显示：块内显示：内联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
