很头疼,经常分不清楚,方便了用户,困扰了开发者自己。
其实就是一个相对的单位,不过定义初衷字体的大小。
(1)
我们都知道一般浏览器默认的字体大小是16px,为了计算方便,一般会做如下处理:
body{font-size:62.5%} // 如果汉字的话,则改成63%
这个的意思就是,html本来字体是16px,而html是body的父级,所以body的字体被统一成10px。
于是如果在html中定义<p style="font-size:2em">我们都是好孩子</p>,这个时候该段落字体的大小则为相对值20px。
(2)
还有问题就是继承,这个属性会发生继承,所以以下语句:
<div style="font-size:5em" id="f">
<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”的倍数。。。
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”的倍数。。。