问题描述
我想了解当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 ...
如果您有一个 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,
是border-style当我阅读，我发现您的问题实际上：
when i read the spec, i find your question actually quite well answered:
$ 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>
或在视觉上：
+- 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:
+--------------------------------------
| 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. |
+--------------------------------------+
这篇关于显示：块内显示：内联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！