CSS相对单位的继承机制解析：为何子元素字号未按预期放大？

你忽略的核心点是：CSS属性继承的是父元素计算后的绝对像素值，而非相对单位本身。

咱们拆解你的例子：
假设浏览器默认根字号是16px，父元素设置font-size:1.5em后，会先计算出绝对像素值：16px × 1.5 = 24px。子元素没有单独设置字号时，会直接继承这个24px的最终值，而不是再用1.5em去乘以父元素的1.5em。

如果要让子元素字号在父元素基础上再放大，你需要给子元素单独声明font-size：

.parent {
  font-size: 1.5em;
}
.child {
  font-size: 1.5em; /* 此时会基于父元素的24px计算，得到36px */
}

简单说，em的相对计算只发生在当前元素设置该属性的瞬间，一旦计算完成，继承给子元素的就是最终的像素值，不会重复触发相对计算。

你的原始代码示例：

.parent {
  font-size: 1.5em; /* Updated font size for the parent */
}

<div class="parent">
    Parent with updated font-size 1.5em
    <div class="child">
        Child with inherited font-size (calculated: 1.5 * 1.5em)
    </div>
</div>

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