58

在这个例子中：

CSS

h1 { font-size: 2em; }
.smaller { font-size: 0.5em; }

HTML

<h1>Hi, I am a <span class="smaller">toad</span></h1>

“toad”这个词是 0.5 乘以 16px（浏览器的标准字体大小）还是 0.5 乘以 2em（h1 的字体大小）？

4

4 回答 4

55

它等于使用它的元素的“font-size”属性的计算值。继承沿着文档树向下运行。

要回答您的问题，它将是 2em 的 0.5 倍，而无论 h1 的父级计算出的字体大小是多少，这都是 2 倍。唷。

同样重要的是要注意，如果您em在其他 CSS 属性上使用，例如widthor height，则结果将根据您应用orfont-size的任何元素的计算来计算，等等...widthheight

在我看来，以下文章em很好地描述了该单元的使用和上下文，以及其他一些阅读材料和资源……rem您可能也会对这些单元感兴趣。

  1. http://www.impressivewebs.com/understanding-em-units-css/
  2. http://snook.ca/archives/html_and_css/font-size-with-rem
  3. http://caniuse.com/rem

你可能还想看看这个小提琴，看看它是如何更清晰的：

http://jsfiddle.net/HpJjt/3/

于 2013-03-15T11:52:47.543 回答
3

em单位表示元素的字体大小，除非在font-size属性值中使用，它表示父元素的字体大小。从这个意义上说，在所呈现的情况下，上下文是父元素。

在本例中，单词“toad”的字体大小因此等于h1. 从给定的数据中无法推断出它的具体价值。

当计算字体大小时，h1在处理这个构造时，已经计算了父级的字体大小；我们称之为s。首先h1计算s 的字体大小，将s（父元素的字体大小）乘以 2。然后span计算元素的字体大小，将其父元素的字体大小乘以 0.5，得到s。从理论上讲，舍入误差可能会导致此类过程中的最小偏差，但可以假设在计算机中乘以 2 和 0.5 是精确的。

于 2013-03-15T12:25:31.537 回答
1

它将是上下文中 h1 元素的 2em 的 0.5 倍。

要强制它相对于 16px，您必须首先将 h1 的父级设置为 font-size 16px。

.wrapper{字体大小：16px；} h1 { 字体大小：2em；} .smaller { 字体大小：0.5em; }

<div class="wrapper"><h1>Hi, I am a <span class="smaller">toad</span></h1></div>

所以在这种情况下，

  • wrapper 的字体大小为 16px
  • h1 的字体大小为 2em 为 16px
  • span.smaller 的字体大小为 1em（继承自 h1 的 .wrapper（.5em of 2em））为 16px

请注意，em 是上下文的相对度量，名义上基于当前字体中的 M 个字符高度。对于所有意图，h1 的大小为 32px，span.smaller 的大小为 16px。

于 2013-03-15T12:06:33.567 回答
1

它取决于父元素的像素大小。如果你的父元素像素大小是 16px

.5em将等于您的基本像素的一半，因此它将是8px并且2em对于 h1 将等于32px。

这完全取决于您如何在 CSS 中设置父元素像素大小。

http://pxtoem.com/

于 2013-03-15T12:10:13.533 回答