css - em单位和百分比有什么区别？

Question

我已经阅读了很多关于这个主题的文章（并搜索了 Q&A），我找到了，但我仍然不明白 em 单位和百分比之间的区别是什么。帮助？

PS我看过这个代码示例：

p { font-size: 10px; }
p { line-height: 120%; }  /* 120% of 'font-size' */

那应该是什么意思？为什么会有人想将行高设置为字体大小的百分比值？

score 7 · Accepted Answer

好的，所以我决定总结一下答案。

line-height 的百分比值是相对于当前字体大小的。
em 单位总是相对于字体大小。
百分比取决于上下文。例如，如果它们用于字体大小，它们将相对于当前字体大小；如果它在高度，它们将相对于高度。
当父标签的字体大小声明为“小”、“中”或“大”时，它会发生一点变化，因为这些值受浏览器设置的影响。在这种情况下 1em =\= 100%，1em 似乎使设置比 100% 更“小”或更“大”，请在此处阅读。

谢谢你们。:)

score 2 · Accepted Answer

行高通常是字体大小的倍数。事实上，它是唯一不需要指定单位的值：

p { line-height: 1.2; } /* = 1.2em = 1.2*font-size = 120% of font-size */

如果 line-height 与 font-size 成比例，则更容易调整字体大小，而不必担心固定的 line-height。

score 2 · Accepted Answer

1em = 100%、2em = 200%、1,4 em = 140% 等等。但是，它实际上取决于上下文。

1em表示“等于实际字体大小”，2 - “字体大小的 2 倍”。EM 适应用户设置。

当父标签的字体大小声明为“小”、“中”或“大”时，它会发生一点变化，因为这些值受浏览器设置的影响。当用户将客户端字体大小更改为“小”或“大”时，1em似乎会使字体比100%.

3 回答 3