Question

我想了解当CSS为display:block的元素是CSS为display:inline的元素的DOM子元素时会发生什么（因此块元素是内联元素的子元素）。

CSS 2.1规范的Anonymous block boxes部分介绍了这种情况：该示例包含以下规则......

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

......随附的文字说......

BODY元素包含一个块（C1）匿名文本后跟一个块级元素后跟另一个匿名文本块（C2）。结果框将是一个身体周围的匿名挡盒，包含匿名块框在C1周围，P块框，和 C2周围的另一个匿名阻止框。

如果你有一个display:inline父元素，如果这个父元素的子元素为display:block，那么该子元素的存在似乎会使父元素接近的行为比如display:block，并忽略它被定义为display:inline的事实（因为父母现在只包含匿名和非匿名块子，但它不再包含任何内联子项）？

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

编辑：我对理解CSS 2.1标准比对各种浏览器实现在实践中的表现更感兴趣。

第二次编辑：

规范中注明了一个区别。在下面的文档中，第二个“块”段的边框围绕整个段落和页面的整个宽度;而第一个'内联段落的边框是在段落内的每一行（即使有多行），并且不超过每行的确切宽度（每行都比页面宽度短）。

<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的情况。 / p>

该规范引用了一句话，

在导致的元素上设置属性要生成的匿名块框仍然适用于方框和内容那个元素。例如，如果是边界已经设置在BODY上在上面的例子中，元素边界将在C1周围绘制（打开在线的末端）和C2（打开在行的开头）。

“border-style”属性是唯一可以看到差异的属性吗？

Answer 1

当我阅读the spec时，我发现您的问题实际上是quite well answered：

当内联框包含一个块框时，内嵌框[...]在块周围被打破。中断前和中断后的[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.  |
+--------------------------------------+

Answer 2

内联容器不能包含块容器。发生这种情况时的通常结果是内联容器被转换为块以容纳其内容。如果您需要一个内联显示的容器，其中包含看似块的内容，请使用以下命令：

display: inline-block;

inline-block属性是一种显示模式，它以内联方式定位容器，内联容器的直接属性和定义仅应用于容器本身，而不会将其子项限制为此类约束。结果是，如果父级已定义定义，或者可能导致父级维度扩展以容纳更大的子级，则内联块父级的块容器子级将限制为父级的维度。设置为内联块的容器可以接收仅提供给块的属性，例如宽度或高度，而不会丢失与内联容器关联的默认定位。

FF2不支持该属性，因此Ice Weasel浏览器不支持该属性。几乎所有其他浏览器都支持该属性，包括IE6，所以你可以使用它，因为几乎没有人使用FF2或Ice Weasel，只有少数用户被限制在开箱即用的Linux发行版中。

Answer 3

有时取决于确切的css或浏览器。

最常见的是，我看过两种行为：

display:block元素中的display:inline元素使display:inline表现得像display:block width:100%。
仅包含display:inline display:block或float:left元素的float:right元素不占用空间，就好像其中没有元素一样。 display:block元素就像在另一个display:block元素中的位置一样，有时根据position执行时髦的操作。

position和float都会使子元素有时会出现奇怪的行为，但是避免使用它们会使它们像inline一样工作。

Answer 4

我认为我最终理解了这种差异，并且存在根本区别。

当使用display：block定义顶级元素（例如<BODY>）时，则：

有一个与元素相关联的块
此块包含（即它充当包含块）匿名块（例如文本节点）和非匿名子元素（例如<P>块）
顶级元素的样式属性，例如填充，与此包含块相关联

当使用display：inline定义顶级元素（例如<BODY>）时，则：

没有与元素
元素的内容（匿名块中的文本节点和非匿名块中的子元素）不具有与顶级元素关联的包含块< / p>
顶级元素的样式属性，例如填充，与其内联内容相关联

display：block inside display：inline

4 个答案: