em的计算方法(实用、赞）

之前据我所了解css中em不是一个固定值，而是一个相对值，它的值等于父元素的font-szie，即1em=父元素的font-szie，如果父元素没有font-szie那么取浏览器的默认值（一般为16px，可以理解为父元素继承所得的font-size），但是这种理解是片面的。
例如：

<div id="parent" style="font-size: 16px;">
  <div id="child" style="font-size: 1.25em; line-height: 1.5em;" >Ok</div>
</div>

 

上图中parent的font-size = 16px , 那么child元素font-size=16px * 1.25=20px，这个容易理解。如此类推line-heigth: 1.5em应为16px * 1.5 = 24px, 但它的值却是30px, 这是为什么呢？
原来元素自身上其他的属性（font-size除外），值如“boder、width、height、padding、margin、line-height”等的em参考值是元素自身font-size而不是父组的font-size, 所以Child的line-height=16px * 1.25 * 1.5 = 30px；

结论：

1、字体计算公式

    1em = 父元素的font-size 
    像素值 ÷ 父元素的font-size = em值

2、其它属性的计算公式

    1em = 元素自身的font-size    
    像素值 ÷ 元素自身的font-size = em值 

可参考：《关于css中em和百分数的区别》 的最佳答案