字体大小的计算值是多少

What is calculated value for font-size 

<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) 的 "Calculated value" 是 50% 还是 39.6px？

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

宽度也将应用相同的计算，结果为 100px。

你的问题有点令人困惑，但我会尽量涵盖你所问的细节。

首先，我认为您指的是 "Computed" 值而不是 "Calculated" 值。您还在评论中询问了 "Used" 值，为了全面了解我们还需要涵盖其他一些值，"Specified" 值、"Resolved" 值和 "Actual"值。

现在首先考虑 font-size，我们有 .myspan 元素

  • 指定值 = 220%
  • 计算值 = 18px * 220% = 39.6px
  • 解析值 = 39.6px
    （font-size的解析值为计算值）
  • 使用值 = 39.6px
    （始终与 font-size 的计算值相同）
  • 实际值=约39-40px
    （CSS 像素将转换为设备像素。可能会根据可用字体和设备上最接近的可渲染数字进行一些其他近似）

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

  • 指定值 = 50%
  • 计算值 = 50%
    （像素长度在计算值时未知，因为布局在这一步还没有发生）
  • 使用值 = 200px * 50% = 100px
    （布局完成，像素值确定）
  • 解析值=100px
    (width的解析值为使用值)
  • 实际值=约100px
    （与字体大小一样，CSS 像素将转换为设备像素并使用设备上最接近的可渲染数字）

现在，造成混淆的是，当您在 JavaScript 中使用 getComputedStyle() 或检查浏览器开发人员工具中的 "Computed Values" 选项卡时，您没有得到 "Computed" 元素的值 - 您将获得元素的 "Resolved" 值。

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