他们的背景是什么？

Question

在这个例子中:

CSS

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

HTML

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

"toad"这个词是0.5p 16px(浏览器的标准字体大小)还是0.5em 2em(h1的字体大小)？

Answer 1

它等于使用它的元素的'font-size'属性的计算值.继承在文档树中运行.

要回答你的问题,它将是2em的0.5倍,而无论h1的父计算字体大小是什么,它都是2倍.p.

同样重要的是要注意,如果你使用em其他的CSS属性,例如,width或者height,结果将被从计算计算font-size应用的任何元素的width或height对等...

以下文章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/