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

4

2 回答 2

3

你的问题有点令人困惑，但我会尽量掩盖细节，因为我认为你在问。

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

现在采取第font-size一个，我们有 .myspan 元素

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

对于width, 情况略有不同

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

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

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

于 2020-01-27T23:50:35.327 回答
0

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

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

于 2020-01-27T20:48:19.137 回答