显示：块内显示：内联答案

【问题标题】：display:block inside display:inline显示：块内显示：内联
【发布时间】：2015-04-18 06:44:54
【问题描述】：

我想了解当 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 标准，而不是各种浏览器实现在实践中的行为方式和行为方式。

第二次编辑：

规范中有一个区别。在以下文档中，第二个“块”段落的边框围绕整个段落和页面的整个宽度；而第一个 '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（打开在行首）。

“边框样式”属性是唯一可见差异的属性类型吗？

【问题讨论】：

re：第二次编辑：这是我在您编辑前 36 分钟写的。嗯...
相关（不太详细的问题）：stackoverflow.com/questions/746531/…

标签： css inline

【解决方案1】：

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

当内嵌框包含块框时，内嵌框 [...] [被] 在块周围断开。 break 之前和之后的 [in]line 框被包含在匿名框中，并且块框成为这些匿名框的兄弟。

<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 块框），但规范说明了区别：

在元素上设置的导致匿名块框生成的属性仍然适用于[生成的匿名块]框和该元素的内容。例如，如果在 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.  |
+--------------------------------------+

【讨论】：

是的，你是对的。 “边框样式”属性是唯一可见差异的属性类型吗？
不 - 它也可以通过边距、填充、文本对齐、文本装饰等看到。
使用“text-decoration: underline”我看到文本（只有文本，不是空白）被下划线，不管元素的“显示”。你觉得应该有什么区别？ [我正在使用 IE8 和 FF3.0.14 fwiw]
与inline parent，只有生成的匿名块框有下划线，而不是原始子块框（FF3.5.3 win）。请注意规范的这一部分：“由于 CSS1 和 CSS2 没有定义这种行为，CSS1-only 和 CSS2-only 用户代理可以实现这个替代模型并仍然声称符合 CSS 2.1 的这一部分。这不适用于开发的 UA本规范发布后。”
您是否使用规范中的确切示例，包括。 ?在正文上使用“显示：内联”时，我在匿名块上得到下划线，而在
上没有下划线。 / 现在得走了——晚安。

【解决方案2】：

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

display: inline-block;

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

FF2 不支持该属性，因此 Ice Weasel 浏览器不支持该属性。几乎所有其他浏览器都支持该属性，包括 IE6，因此您应该可以使用它，因为几乎没有人使用 FF2 或 Ice Weasel，除了少数用户仅限于开箱即用的 Linux 发行版。

【讨论】：

"发生这种情况的通常结果是内联容器被转换为块以容纳其内容。" -- 我的问题是：每当发生这种情况时，它是否与一开始就被定义为 display:block 完全一样？如果不完全一样，有什么区别？
当一个块子被放置在一个内联父级中时，定义该父级为内联的声明将被覆盖。这意味着，如果浏览器能够自我感知 DOM 结构的变化，那么通过动态删除块子级应该会导致父级自动保留其内联定义。如果浏览器没有那么自我意识，那么父级将永久呈现为一个块，直到子级变为静态内联或直到子级从 HTML 中删除。
只是想补充一点，IE6 只支持已经内联的元素的内联块。但除此之外：+1

【解决方案3】：

我想我终于明白了其中的区别，而且存在根本的区别。

当顶层元素（例如<BODY>）用display:block定义时，那么：

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

当顶层元素（例如<BODY>）用display:inline定义时，那么：

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

【讨论】：

这个加上最受欢迎的答案有很大帮助。

【解决方案4】：

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

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

display:inline 元素中的display:block 元素使display:inline 的行为类似于display:block 和width:100%。
仅包含 display:block float:left 或 float:right 元素的 display:inline 元素不占用空间，就好像其中没有元素一样。 display:block 元素的行为就好像它们在另一个 display:block 元素中一样，有时会根据 position 做出一些时髦的动作。

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

【讨论】：