Question

我正在阅读CSS Spec 2.1并得到了这个问题。

关于继承，它说：

当继承发生时，元素继承计算值。该来自父元素的计算值变为指定的值值和孩子的计算值。

但是对于属性的inherit值，它说：

每个属性也可能具有“继承”的级联值，这意味着对于给定元素，该属性采用相同的指定值 作为元素父母的属性。

这是否意味着：如果我将font-size: 2em指定给父级，font-size: inherit指定给子级，则结果与将font-size: 2em指定给子级相同（因为2em是其父母的指定值）？

从我的样本JSFiddle开始，情况并非如此：

＆＃13;

#parent {
  font-size: 2em;
}
#child-0 {
  font-size: inherit;
}
#child-1 {
  font-size: 2em;
}

＆＃13;

<div id="parent">I am parent.
  <div id="child-0">I am child 0.</div>
  <div id="child-1">I am child 1.</div>
</div>

＆＃13;

任何人都可以澄清吗？

Answer 1

让我们看一下the inherit value：

每个属性也可能具有级联值'inherit'，这意味着对于给定元素，该属性采用相同的指定值 作为元素父级的属性。

现在的问题是，如何处理指定值？

答案在Computed Values下：

6.1.2计算值
在级联[...]
期间，
指定值 已解析为计算值

以及如何处理计算值？

[...]'em'和'ex'单位是按像素或绝对长度计算。

（强调补充）

这意味着当子项继承父项字体大小时，它将继承其父项计算值（以像素为单位px），默认情况下2em为32px。

当给予孩子自己的em值时，它将根据其父字体大小的计算值计算其在px中的值。 2em会将孩子的字体大小加倍。

在你的例子中：

2em on parent = 32px
继承child = 32px（父级的计算值）
2em on the child = 64px（子项的计算值是父项值的两倍）

这反映在您的示例中：

#parent {
  font-size: 2em;
}
#child-0 {
  font-size: inherit;
}
#child-1 {
  font-size: 2em;
}

<div id="parent">I am parent.
  <div id="child-0">I am child 0 and I inherit my parents computed font-size of 32px</div>
  <div id="child-1">I am child 1 and I double my font-size with 2em. This means that I have a font-size of 64px</div>
</div>

计算font-size的继承值

1 个答案: