显示:块内显示:内联

2023-12-01

我想了解当 CSS 为的元素时会发生什么display:block是 CSS 为的元素的 DOM 子元素display:inline(这样块元素是内联元素的子元素)。

这种情况在匿名块盒CSS 2.1 规范部分:示例包括以下规则...

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

...并且随附的文字说...

BODY 元素包含一个块 (C1) 匿名文本后跟 块级元素后跟 另一块(C2)匿名文本。 生成的框将是 BODY 周围的匿名块框, 包含一个匿名块盒 围绕 C1、P 块框,以及 C2 周围的另一个匿名区块盒。

如果你有一个display:inline父元素,并且如果该父元素有一个子元素display:block,那么那个孩子的存在似乎让父母nearly表现得像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首先。

规范中引用了一段话:

在元素上设置的属性会导致 要生成的匿名块框 仍然适用于盒子和内容 该元素的。例如,如果一个 边框已设置在 BODY 上 上例中的元素 边框将围绕 C1 绘制(打开 在线的末尾)和C2(打开 在该行的开头)。

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


当我阅读时the spec,我实际上发现了你的问题回答得很好:

当行内框包含块框时,行内框会在块周围被破坏。中断之前和中断之后的[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 元素上设置了边框,则边框将围绕 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.  |
+--------------------------------------+
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

显示:块内显示:内联 的相关文章

随机推荐