我想了解当CSS所在的元素是CSS的元素的display:blockDOM子元素时会发生什么display:inline(因此块元素是内联元素的子元素).
CSS 2.1规范的匿名块框部分描述了这种情况:该示例包括以下规则......
body { display: inline }
p { display: block }
Run Code Online (Sandbox Code Playgroud)
......以及附带的文字说......
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 …Run Code Online (Sandbox Code Playgroud)