字体大小的计算值是什么

Question

<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？

Answer 1

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

首先，我认为您的意思是“计算”值而不是“计算”值。您还需要在注释中询问有关“已使用”的值，并且要获得完整图像，我们还需要涵盖其他一些值，例如“指定”值，"Resolved"值和“实际”值。

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

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

对于width，工作原理略有不同

• 指定值= 50％
• 计算值= 50％
  （像素长度在计算值时未知，因为此步骤尚未进行布局）
• 使用的值= 200像素* 50％= 100像素
  （完成布局并确定像素值）
• 解析值= 100px
  （width的解析值是使用的值）
• 实际值=约100像素
  （与字体大小一样，CSS像素将转换为设备像素，并使用设备上最接近的可渲染数字）

---

现在，引起混乱的是，当您在JavaScript中使用getComputedStyle()或检查浏览器开发人员工具中的“计算值”标签时，您没有获得该元素的“计算值”-您将获得该元素的“已解决” 值。

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

Answer 2

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

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