display：block内部显示：内联

小编典典

display：block内部显示：内联

css

我想了解当CSS是CSS元素的display:blockDOM子元素display:inline（因此block元素是inline元素的子元素）时会发生什么情况。

CSS 2.1规范的“ 匿名块框”部分描述了这种情况：该示例包括以下规则…

body { display: inline }
p    { display: block }

…以及随附的文字说…

BODY元素包含一个匿名文本块（C1），然后是一个块级元素，然后是另一个匿名文本块（C2）。结果框将是围绕BODY的匿名阻止框，其中包含C1周围的匿名阻止框，P阻止框和C2周围包含另一个匿名阻止框。

如果您有一个display:inline父元素，并且该父元素有一个子元素，则该子元素display:block的存在似乎会使该父元素的行为
几乎
像display:block，而忽略了其定义为的事实（因为该父元素display:inline现在除匿名外不包含任何其他元素）和非匿名的屏蔽子级，即它不再包含任何内联子级）？

我的问题是，在这种情况下（有一个display:block孩子），那么定义display:inline而不是定义父母之间有什么区别display:block？

编辑：我更想了解CSS 2.1标准，而不是各种浏览器实现在实践中的表现。

第二次编辑：

规格中有一个区别。在以下文档中，第二个“块”段落的边框包围了整个段落和页面的整个宽度；而第一个’inline段落的边框围绕该段落中的每行（即使有多行），且不超过每行的确切宽度（每行短于页面宽度）。

<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>

如果我添加以下样式规则…

b
{
display: block;
}

…然后，第一个内联段落中的“注：”将成为一个块，该段落将拆分该段落（根据规范，该段落的第一部分和最后一部分现在位于匿名块中）。但是，该段落的第一部分和最后部分的边框仍然是“内联”样式的边框：因此，仍然与最初p.one声明的边框不同display:block。

规格中有一个报价，说：

在元素上设置的会导致生成匿名阻止框的属性仍然适用于该元素的框和内容。例如，如果在上面的示例中在BODY元素上设置了边框，则将在C1（在行的结尾处打开）和C2（在行的开头处打开）周围绘制边框。

“边界样式”属性是唯一可以看到区别的属性类型吗？

阅读 548

2020-05-16

共1个答案

小编典典

当我阅读规范时，我发现您的问题实际上得到了很好的回答：

内嵌盒包含一个块框时，该内嵌框在块周围断裂。中断前和中断后的[in]内嵌框都包含在匿名框中，而阻止框将成为这些匿名框的同级。

<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的匿名阻止框，其中包含C1周围的匿名阻止框，P阻止框和C2周围包含另一个匿名阻止框。

或者，在视觉上：

+- anonymous block box around body ---+
| +- anonymous block box around C1 -+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- P block box -------------------+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- anonymous block box around C2 -+ |
| |                                 + |
| +---------------------------------+ |
+-------------------------------------+

现在您的问题是：这与<BODY style="display: block; ">？

是的。虽然它仍然是4个盒子（ 身体周围的匿名阻止盒子 现在是 BODY阻止盒子 ），但规格说明 了区别 ：

在元素上设置的导致生成匿名块框的属性仍然适用于该元素的[生成的匿名块]框和内容。
例如，如果在上面的示例中在BODY元素上设置了边框，则将在C1（在行的结尾处打开）和C2（在行的开头处打开）周围绘制边框：

+--------------------------------------
| 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.  |
+--------------------------------------+

2020-05-16