css中的em单位(转载)

原文: https://www.w3cplus.com/css/px-to-em © w3cplus.com

用户的浏览器默认渲染的文字大小是“16px”，换句话说，Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px”。 因此，在一个CSS选择器被写入时，浏览器就有了一个“16px”大小的默认字体。此时我们Web页面中的就继承了这个“font-size:16px;”，除非你在CSS样式中显式的设置的“font-size”值，来改变其继承的值。这样一来，“1em = 16px”、“0.5em = 8px”、“10em = 160px”等等，那么我们也可以使用“em”来指定任何元素的大小.

设置Body的font-size

很多前辈在多年的实践中得出一个经验，他们建议我们在中设置一个正文文本所需的字体大小，或者设置为“10px”，相当于（“0.625em或62.5%”），这样为了方便其子元素计算。这两种都是可取的。但是我们都知道，的默认字体是“16px”，同时我们也很清楚了，我们改变了他的默认值，要让弹性布局不被打破，就需要重新进行计算，重新进行调整。所以完美的设置是：

body {font-size:1em;}

可是在那个没人爱的IE底下，“em”会有一个问题存在。调整字体大小的时候，同样会打破我们的弹性布局，不过还好，有一个方法可以解决：

html {font-size: 100%;}

总结：

1、默认1em=16px

2、font-size中的em是相对于父元素font-size的

3、元素其他属性（除了font-size）中的em是相对于本元素的font-size值来算的。