display:block Inside display:inline
在 CSS 世界中，内联元素通常表现为沿着流动的一大块文本其父行，而块元素则启动新行。但是，当内联元素包含样式为块元素的子元素时，它们的行为会变得更加复杂。
请考虑以下场景，如 CSS 2.1 规范中所述：
<code class="css">body { display: inline }
p { display: block }</code>在此例如，body 元素具有 display: inline 样式，而其子元素 p 具有 display: block 样式。这种组合创建了一种独特的情况，其中最初定义为内联的 body 元素的行为看起来更像块元素。
块级 p 元素的存在导致 body 元素分解为匿名块框围绕其文本内容（C1 在 p 之前，C2 在 p 之后）。 p 元素成为这些匿名框的同级元素。
在视觉上，生成的框可以表示如下：
+- anonymous block box around body ---+ | +- anonymous block box around C1 -+ | | | + | | +---------------------------------+ | | | | +- P block box -------------------+ | | | + | | +---------------------------------+ | | | | +- anonymous block box around C2 -+ | | | + | | +---------------------------------+ | +-------------------------------------+
此行为与 body 元素定义为的场景不同块元素（显示：块）。在块元素的情况下，body 的文本内容被包含在 body 元素本身内，而不是被分割成匿名框。
+--------------------------------------+ | This is anonymous text before the P. | | | | This is the content of P. | | | | This is anonymous text after the P. | +--------------------------------------+
两种情况之间的一个关键区别是属性的应用匿名块盒。 CSS 2.1 规范规定，在生成匿名块框的元素上设置的属性仍然适用于这些框及其内容。这意味着边框或填充等属性将应用于由内联元素创建的匿名框。
总而言之，虽然包含块元素的内联元素看起来与块元素的行为类似，但应用属性和呈现布局的方式存在细微差别。 CSS 2.1 规范提供了这些差异的详细解释，帮助开发人员理解网页中此类元素的行为。
以上是当内联元素包含样式为块元素的子元素时，内联元素的行为如何变化，这与父元素定义为块元素的情况有何不同的详细内容。更多信息请关注PHP中文网其他相关文章！
