匿名块框为何未继承属性？规范规则解析及示例求助

首先明确W3C核心规则：

匿名盒的继承属性从直接包围它的最近非匿名盒继承；非继承属性取CSS初始值。

你遇到的特殊情况，核心原因是：当行内元素（如设为display:inline的<p>）内部包含块级元素（如设为display:block的<span>）时，浏览器会触发特殊布局拆分逻辑，导致匿名盒的“包围非匿名盒”发生变化。

一、先明确两个关键概念 #

• 继承属性：如color、font-size、text-align、line-height等，会自动从父元素继承
• 非继承属性：如width、margin、padding等，默认取初始值，不会继承

二、你的测试场景拆解 #

场景1：p{display:inline; color:red;}，内容为<p>匿名文本<span>span文本</span></p> #

此时<p>是行内非匿名盒，内部的“匿名文本”是匿名行内盒，直接被<p>包围：

• color是继承属性，匿名行内盒直接继承<p>的color:red，所以匿名文本变红，完全符合规则。

场景2：p{display:inline;}，内容为<p style="text-align:center;">匿名文本<span style="display:block">span文本</span></p> #

这里触发了行内元素包含块级元素的特殊拆分：

1. 浏览器会把<p>的内容拆分为三个独立的块级容器：
   • 匿名块盒（包含“匿名文本”）
   • <span>块盒
   • 若有后续文本，还会生成另一个匿名块盒
2. 这些块盒的直接父容器不再是<p>，而是<p>的上层块容器（比如<body>），<p>本身会被拆分为空行内盒或被忽略。
3. 此时：
   • 匿名块盒的text-align继承自上层容器（比如<body>默认text-align:left），所以匿名文本不居中；
   • <span>块盒的父元素仍为<p>，因此继承了<p>的text-align:center，所以<span>文本居中。
4. 当你注释掉p{display:inline}，<p>恢复为块容器，内部的匿名文本是匿名行内盒，直接被<p>包围，继承text-align:center，因此文本居中。

三、验证规则的正确示例 #

示例1：正常块容器内的匿名行内盒 #

<style>
  div {
    text-align: center;
    color: blue;
    font-size: 18px;
  }
  span {
    font-weight: bold;
  }
</style>
<div>匿名文本<span>span文本</span></div>

• 匿名文本是匿名行内盒，直接被<div>包围：
  • 继承text-align:center（居中）、color:blue（蓝色）、font-size:18px（18号字），符合规则。

示例2：块容器内的匿名块盒 #

<style>
  div {
    color: green;
    margin-left: 20px; /* 非继承属性，匿名块盒取初始值0 */
  }
  p {
    display: inline;
  }
</style>
<div>
  <p>行内文本</p>
  匿名块文本 <!-- 因为div是块容器，这里的文本生成匿名块盒 -->
</div>

• 匿名块盒继承<div>的color:green（绿色）；
• margin-left是非继承属性，匿名块盒取初始值0，不会继承<div>的20px，符合规则。

内容的提问来源于stack exchange，提问作者user19481364