什么是上下文？
在这个例子中：
CSS
h1 { font-size: 2em; } .smaller { font-size: 0.5em; } HTML
<h1>Hi, I am a <span class="smaller">toad</span></h1>
请问“蟾蜍”一词是16倍（浏览器的标准字体大小）的0.5倍还是0.5倍2倍（h1的字体大小）？
它等于它所使用的元素的“font-size”属性的计算值。 inheritance在文档树下运行。
要回答你的问题，这将是2em的0.5倍，而这又是h1的父母的计算字体大小的2倍。 唷 。
同样重要的是要注意，如果你在其他CSS属性上使用em ，例如width或者height ，那么结果将根据你应用width或height的任何元素的计算font-size来计算。
下面的文章很好地描述了单位的使用和上下文，以及其他一些阅读材料和资源……对象单元也许会让你感兴趣。
- http://www.impressivewebs.com/understanding-em-units-css/
- http://snook.ca/archives/html_and_css/font-size-with-rem
- http://caniuse.com/rem
你也可以看看这个小提琴，看看它是如何更清楚一点：
em单位表示元素的字体大小，除非在font-size属性的值中使用，它表示父元素的字体大小。 从这个意义上讲，在这个案例中，上下文就是父元素。
在呈现的情况下，单词“蟾蜍”的字体大小因此等于h1的父亲的字体大小。 从给出的数据可以推断出它的具体价值。
当计算字体大小时，将在处理该构造时计算h1的父亲的字体大小; 我们称之为s 。 首先计算h1的字体大小，将s （父级的字体大小）乘以2.然后计算span元素的字体大小，将其父级的字体大小乘以0.5，得到s 。 从理论上讲，舍入误差可能会导致这种过程的最小偏差，但计算机中可以假定乘以2和0.5。
这将是上下文中h1元素的2em的5倍。
要强制它相对于16px，你必须首先将h1的父级设置为font-size 16px。
.wrapper {font-size：16px;} h1 {font-size：2em; } .smaller {font-size：0.5em; }
<div class="wrapper"><h1>Hi, I am a <span class="smaller">toad</span></h1></div>
所以在这种情况下，
- 包装的字体大小为16px
- h1的字体大小为16px的2em
- span.smaller的字体大小为1em（of .wrapper从h1（.em的2em）inheritance而来）为16px
请注意，em是名义上基于当前字体中M个字符高度的上下文的相对度量。 对于所有的意图，然后h1有一个32px的大小和span.smaller有一个16px的大小。
这取决于父元素的像素大小。 如果你的父元素像素大小是16px
.5em将等于您的基本像素的一半，所以它将是8px和2em为h1将等于8px 。
这一切都取决于你如何在CSS中设置父元素的像素大小。
