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.5倍16px（浏览器的标准字体大小）还是0.5倍2em（h1的字体大小）？

Answer 1

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

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

同样重要的是要注意，如果您对其他CSS属性使用em，例如width或height，则会根据计算出的font-size计算结果您应用width或height等的任何元素，等等......

以下文章在我看来很好地描述了em单位的用法和背景，以及其他一些阅读材料和资源...... rem单位也可能对您感兴趣。

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

您可能还想查看这个小提琴，看看它有多清楚：

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

Answer 2

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

在显示的情况下，单词“toad”的字体大小因此等于h1的父级的字体大小。根据给定的数据，不能推断出具体的价值。

当计算字体大小时，将在处理此构造时计算h1的父级的字体大小;我们称之为 s 。首先计算h1的字体大小，将 s （父级的字体大小）乘以2.然后计算span元素的字体大小，乘以其父级的字体大小为0.5，产生 s 。理论上，舍入误差可能导致此类过程中的偏差最小，但可以假设乘以2和0.5在计算机中是准确的。

Answer 3

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

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

.wrapper {字体大小：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的字体大小为2em of 16px
span.smaller的字体大小为1em（.wrapper继承自h1（。5em of 2em））16px

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

Answer 4

这取决于父元素的像素大小。如果您的父元素像素大小为16px

.5em将等于基础像素的一半，因此h1的8px和2em等于32px。

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

http://pxtoem.com/

他们的背景是什么？

4 个答案: