em这个机构 _Web前端

em这个单位

很头疼，经常分不清楚，方便了用户，困扰了开发者自己。

其实就是一个相对的单位，不过定义初衷字体的大小。

（1）

我们都知道一般浏览器默认的字体大小是16px，为了计算方便，一般会做如下处理：

body{font-size:62.5%}????// 如果汉字的话，则改成63%

这个的意思就是，html本来字体是16px，而html是body的父级，所以body的字体被统一成10px。

于是如果在html中定义<p style="font-size:2em">我们都是好孩子</p>，这个时候该段落字体的大小则为相对值20px。

（2）

还有问题就是继承，这个属性会发生继承，所以以下语句：

??? <p style="font-size:2em">

</div>

这里这个p就不是简单的20px，而是100px，因为它的2em是在div#f的基础上计算的，所以5*10*2=100px。。。

（3）

em是基于字体大小的单位，如果用在非字体以外的地方如宽度上面，则它的计算是依据当前字体大小来的，如：

注：em是相对长度单位，相对于当前对象内文本的字体尺寸
body{? font-size:63%; }
<p?style="width:5em;font-size:2em;">女人</p>
这里p的字体大小将是20px，但是宽度则是100px，而非50px。
因为如果是width里头用em单位，则是相对于已经定义的字体大小的倍数，这里字体大小已经是2*10=20px，所以宽度是5*20=100px。。。。
注意如果未定义字体的话，则是相对于body设成62.5%后，默认字体大小即“10px”的倍数。。。