字体大小的计算值是多少答案

【问题标题】：What is calculated value for font-size字体大小的计算值是多少
【发布时间】：2020-01-27 20:45:22
【问题描述】：

<div class="selection">
  <span class="myspan">Selam</span>
</div>

.selection{
  width:200px;
  font-size:18px;
}
.myspan{

  font-size:220%;
  display:block;
  width: 50%;

}

我有上面的html和css。我的问题是：当执行 Css 解析时，字体大小（myspan）的“计算值”是 50% 还是 39.6px？

【问题讨论】：

【解决方案1】：

您的问题有点令人困惑，但我会按照您的要求尝试掩盖细节。

首先，我认为您的意思是“计算”值而不是“计算”值。您还在评论中询问“使用”值，为了全面了解我们还需要涵盖一些其他值，“指定”值、"Resolved" 值和“实际”值。

现在首先使用 font-size，我们有 .myspan 元素

对于width，工作方式略有不同

现在，导致混淆的原因是，当您在 JavaScript 中使用 getComputedStyle() 或检查浏览器开发人员工具中的“计算值”选项卡时，您不会获得元素的“计算”值 - 您会得到元素的 “已解决” 值。

对于getComputedStyle()，这只是出于向后兼容性原因而存在的历史异常。为什么开发者工具也会报告 Resolved 值，我不知道。

【讨论】：

【解决方案2】：

计算值将是父字体大小乘以您在元素上指定的百分比 (18px * 220%)。在这种情况下：39.6px。像这样使用百分比与在子元素上设置font-size: 2.2em 基本相同。

宽度也将应用相同的计算，得到 100px。

【讨论】：

这种情况下使用的值是多少？计算值和使用值有什么不同
我不认为我清楚地理解了这个问题，但是发生了什么：计算的值将是 39.6px，这将是浏览器用来呈现该样式的值。发生这种情况是因为百分比单位（如“em”）是一个相对值，并且将根据他们正在设置的属性的父定义值应用。