em是相对于当前元素的字体大小而言,比如font-size:14px;那么这个元素的1em=14px.
如果当前元素未定义字体大小,则会向上继承父元素的字体大小,如果当前元素的所有祖先元素都没有定义font-size属性值,该元素就会继承浏览器默认样式.
所有浏览器的默认字体大小都是16px.
这样,1em=16px,0.75em=16px*0.75=12px
可是这么计算有点麻烦啊?好办,我们通常在样式中会声明这么一句body{font-size:62.5%}
即设置默认字体大小16px*62.5%=10px;
这样一来,1em=10px,0.75em=7.5px,是不是方便了一些呢?
再来个例子
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{padding:0;margin:0;} html{font-size:62.5%;} p{display:inline-block;border:1px solid silver;} /*使用px作为单位*/ #p1 { font-size:15px; width:150px; height:75px; text-indent:30px; } /*使用em作为单位*/ #p2 { font-size:1.5em; width:10em; height:5em; text-indent:2em; } </style> </head> <body> <p id="p1">两个段落的文字呈现相同的样式</p><br /> <p id="p2">两个段落的文字呈现相同的样式</p> </body> </html>
结果是两个段落的文字呈现相同的样式.
可能有人会问,p2的width不应该是15em吗?height不应该是7.5em吗?text-indent不应该是3em吗?
可是别忘了em的定义啊,是相对于当前元素的字体大小而言的,p2的字体大小被设置成了1.5em=15px;
那么对这个元素而言,1em就是15px了,所以width=150px/15px=10em;height,text-indent依此类推;
这就是统一单位为em时需要注意的.