css – display:block inside display:inline

前端之家收集整理的这篇文章主要介绍了css – display:block inside display:inline前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想了解当一个CSS是display:block的元素是一个DOM的子元素时,CSS是display:inline(这样block元素是内联元素的子元素)。

这种情况在CSS 2.1规范的Anonymous block boxes部分中描述:该示例包括以下规则…

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

…和随附的文字说…

The BODY element contains a chunk (C1)
of anonymous text followed by a
block-level element followed by
another chunk (C2) of anonymous text.
The resulting Boxes would be an
anonymous block Box around the BODY,
containing an anonymous block Box
around C1,the P block Box,and
another anonymous block Box around C2.

如果你有一个display:inline parent元素,如果这个父级有一个子元素是display:block,那么该子元素的存在似乎使父元素几乎像display:block,并且忽略它被定义为display :inline(因为父元素现在只包含匿名和非匿名块子元素,即它不再包含任何内联子元素)?

我的问题是,在这种情况下(有一个显示:块子)然后什么是父的定义显示之间的差异:内联而不是显示:块?

编辑:我更感兴趣了解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。

有一个引用规范,说,

Properties set on elements that cause
anonymous block Boxes to be generated
still apply to the Boxes and content
of that element. For example,if a
border had been set on the BODY
element in the above example,the
border would be drawn around C1 (open
at the end of the line) and C2 (open
at the start of the line).

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

解决方法

当我读 the spec,我发现你的问题实际上 quite well answered

When an inline Box contains a block Box,the inline Box […] [is] broken around the block. The [in]line Boxes before the break and after the break are enclosed in anonymous Boxes,and the block Box becomes a sibling of those anonymous Boxes.

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

The resulting Boxes would be an anonymous block Box around the BODY,containing an anonymous block Box around C1,and another anonymous block Box around C2.

或者,视觉上:

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

现在到您的问题:这是不同于< BODY style =“display:block;”&gt ;? 是的。而它仍然是4盒(匿名块框周围的身体现在是BODY块盒),规格告诉区别:

Properties set on elements that cause anonymous block Boxes to be generated still apply to the [generated anonymous block] Boxes and content of that element. For example,if a border had been set on the BODY element in the above example,the border would be drawn around C1 (open at the end of the line) and C2 (open at the start of the line):

+--------------------------------------
| This is anonymous text before the P. 
+--------------------------------------
  This is the content of P.
 --------------------------------------+
  This is anonymous text after the P.  |
 --------------------------------------+

这不同于< BODY style =“display:block;”&gt ;:

+--------------------------------------+
| This is anonymous text before the P. |
|                                      |
| This is the content of P.            |
|                                      |
| This is anonymous text after the P.  |
+--------------------------------------+

猜你在找的CSS相关文章