css中的em单位
css中有众多单位，常用的px是绝对单位，em则是相对单位。在响应和移动端的大前提下，使用em能够更方便快捷的一次性调整web文档极其HTML元素的字体大小、宽度、边距、边框等一系列属性，可以说在某些方面，使用em作为单位比px更灵活。
一、什么是em
- em的长度 em是CSS中的一个相对单位，它的单位长度是根据元素的文本垂直长度来决定的。可以作用在width、height、line-height、margin、padding、border等样式的设置上。
1em = 元素中文本的1个垂直高度
根据上面的规则：如果元素中文本的大小为16px，那么1em=16px；如果元素中文本大小为20px，那么1em=20px...
- em与HTML文本大小默认值
浏览器中的文本一般默认为16px，也就是说，默认的情况下：
body{
font-size: 24px;
width: 10em; /* 10em = 24px * 10 = 240px */
- em与继承 在CSS中，如果一个元素没有设置font-size，那么它的font-size值就是它父元素的font-size值，这很好理解，就是简单的继承而已。
<style>
body{
font-size: 12px;
}
div {
/* 该元素没有设置font-size，因此继承了父元素的 */
font-size: 12px;
width: 10em; /* 10em = 12px * 10 = 120px */
}
</style>
<body>
<div></div>
</body>
需要注意的是，子元素div继承了父元素body的font-size，所以其实在div的样式表中隐含了一句"font-size: 12px"。现在如果显性的为子元素设置font-size的话，那么子元素将按照自己的font-size计算em的绝对长度。
<style>
body{
font-size: 12px;
}
div {
/* 该元素没有设置font-size，因此继承了父元素的 */
font-size: 20px;
width: 10em; /* 10em = 12px * 10 = 120px */
}
</style>
<body>
<div></div>
</body>
注意上例中div的font-size使用了px作为单位，那如果使用em怎么办呢？需要注意的是，在设置font-size中使用em作为单位，那么em将是其父元素font-size的相对值。
<style>
body {
font-size: 12px;
}
div {
font-size: 2em
width: 10em;
}
</style>
<body>
<div></div>
</body>
子元素div的font-size是根据其父元素body的font-size确定的，
因此2em = 12px * 2 = 24px；而div的width是相对于自己的font-size确定的，因此10em = (12px * 2) * 10 = 240px。所以div中2em = 24px, 10em = 240px也就不奇怪了。
事实上，不仅是width，子元素中除了font-size的em是根据父元素的font-size确定的，其他所有em都是根据自身的font-size确定的。
<style type="text/css">
body{
font-size: 16px;
}
div {
font-size: 1.25em; /* 16px * 1.25 = 20px */
width: 10em; /* 20px * 10 = 200px */
height: 5em; /* 20px * 5 = 100px */
border: 0.05em solid #000; /* 20px * 0.05 = 1px */
margin: 0.25em; /* 20px * 0.25 = 5px */
padding: 0.75em; /* 20px * 0.75 = 15 */
line-height: 1.5em; /* 20px * 1.5em = 30px */
}
</style>
</head>
<body>
<div>
</div>
</body>
二、根据px计算出正确的em
使用PXtoEM计算器 使用在线工具PXtoEM(http://pxtoem.com/)可以轻松快捷的根据px计算出所需要的em值。
手动计算em 由下面的例子可以反向推导出px转em的计算公式
<style>
div {
font-size: 16px;
width: 2em; /* 2em = 16px * 2 = 32px */
}
</style>
px = 参考文本大小 * em => em = px / 参考文本大小
- 注意事项
上面的公式中，"参考文本大小"需要注意：
- 如果元素自身设置了font-size，那么参考文本大小就是自身的font-size大小
- 如果元素自身没有设置font-size，那么参考文本大小就是父元素的font-size大小
- 为元素设置font-size时，如果使用em作为单位，那么参考文本大小是父元素的font-size大小
三、em的缺点
文本大小使用px、em、pt还是百分比的讨论持续了很久，em单位同样拥有缺点。我们已经知道，在不设置元素font-size的情况下，em总是根据父元素的font-size来确定长度；即使元素设置了font-size，多次嵌套使用em也往往会造成疏忽，不仅使用需要大量计算，而且不能保证没有漏网之鱼。这将是一个繁杂而低效的工作。
幸运的是，CSS3带来了rem单位，这可以说是em单位的“改良版”，有关rem的使用方法将在下一篇文章中记录。