我想了解当CSS所在的元素是CSS的元素的display:blockDOM子元素时会发生什么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: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(在行的开头处打开)绘制.
"边境式"属性是唯一可以看到差异的属性吗？
ax.*_*ax. 29
当内联框包含一个块框时,内嵌框[...]在块周围被打破.中断前和中断后的[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. |
+--------------------------------------+
小智 7
内联容器不能包含块容器.发生这种情况时的通常结果是内联容器被转换为块以容纳其内容.如果您需要一个内联显示的容器,其中包含看似块的内容,请使用以下内容:
display: inline-block;
inline-block属性是一种显示模式,它以内联方式定位容器,内联容器的直接属性和定义仅应用于容器本身,而不会将其子项限制为此类约束.结果是,如果父级定义了定义,或者可能导致父级维度扩展以容纳更大的子级,则内联块父级的块容器子级将被限制为父级的维度.设置为内联块的容器可以接收仅提供给块的属性,例如宽度或高度,而不会丢失与内联容器关联的默认定位.
FF2不支持该属性,因此Ice Weasel浏览器不支持该属性.几乎所有其他浏览器都支持包括IE6在内的属性,所以你可以使用它,因为几乎没有人使用FF2或Ice Weasel,只有少数用户被限制在开箱即用的Linux发行版中.