34

我想了解当 CSS 为的元素是 CSS 为display:block的元素的 DOM 子元素时会发生什么display: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:inlinedisplay: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的边框不同。

规范中有一段引述，它说，

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

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

4

4 回答 4

32

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

当一个内嵌框包含一个块框时，内嵌框 [...] [is] 在块周围断开。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.  |
+--------------------------------------+
于 2009-09-12T17:14:15.410 回答
8

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

display: inline-block;

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

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

于 2009-09-10T15:46:15.577 回答
2

我想我终于理解了差异，并且存在根本的差异。

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

  • 有一个与元素关联的块

  • 该块包含（即，它充当包含块）匿名块（例如文本节点）和非匿名子元素（例如<P>块）

  • 顶级元素的样式属性，例如填充，与此包含块相关联

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

  • 没有与元素关联的单个块

  • 元素的内容（匿名块中的文本节点和非匿名块中的子元素）没有与顶级元素关联的包含块

  • 顶级元素的样式属性，例如填充，与其内联内容相关联

于 2009-09-12T20:24:02.990 回答
1

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

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

  • display:blockelement 内部的display:inline元素使display:inline行为类似于display:blockwith width:100%。

  • display:inline仅包含display:block float:leftor元素的float:right元素不占用空间，就好像其中没有元素一样。元素的display:block行为就好像它们在另一个display:block元素中一样，有时会根据position.

position和makefloat子元素有时会出现奇怪的行为，但避免它们会使它们通常像inline.

于 2009-09-03T04:01:17.077 回答