em 是 css 中的一个相对长度单位，相对于当前对象内文本的字体尺寸；如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器默认字体尺寸。可以作用在 width、height、line-height、margin、border 等样式的设置上。
一、什么是 em
1.em 的长度
em 是 CSS 中的一个相对单位，它的单位长度是根据元素的文本垂直长度来决定的。可以作用在width、height、line-height、margin、padding、border 等样式的设置上。
1em = 元素中文本的 1 个垂直高度根据上面的规则：如果元素中文本的大小为 16px ，那么 1em = 16px ; 如果元素中文本大小为20px , 那么1em = 20px ……
2.em与HTML文本大小默认值
浏览器中的文本一般默认为 16px ，也就是说，默认的情况下：
1em = 16pxbody {
font-size: 24px;
width: 10em; /* 10em = 24px * 10 = 240px */
}3.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>需要注意的是，子元素 p 继承了父元素 body 的 font-size ，所以其实在p的样式表中隐含了一句“font-size: 12px;”。现在如果显性的为子元素设置 font-size 的话，那么子元素将按照自己的 font-size 计算 em 的绝对长度。
<style>
body {
font-size: 12px;
}
div {
font-size: 20px;
width: 10em; /* 10em = 20px * 10 = 200px */
}
</style>
<body>
<div></div>
</body>注意上例中 p 的 font-size 使用了 px 作为单位，那如果想使用 em 怎么办呢？需要注意的是，在设置 font-size 中使用 em 作为单位，那么 em 将是其父元素 font-size 的相对值。
<style>
body {
font-size: 12px;
}
div {
font-size: 2em; /* 2em = 12px * 2 = 24px */
width: 10em; /* 10em = 24px * 10 = 240px */
}
</style>
<body>
<div></div>
</body>子元素 p 的 font-size 是根据其父元素 body 的 font-size 确定的，因此 2em = 12px * 2, = 24px；而 p 的 width 是相对于自己的 font-size 确定的，因此10em = ( 12px * 2 ) * 10 = 240px。所以 p 中2em=24px，10em=240px 也就不奇怪了。
事实上，不仅是 width，子元素中除了 font-size 的 em 是根据父元素的 font-size 确定的，其他所有 em 都是根据自身的 font-size 确定的。
<style>
body {
font-size: 16px;
}
div {
font-size: 1.25em; /* 1.25em = 16px * 1.25 = 20px */
width: 10em; /* 10em = 20px * 10 = 200px */
height: 5em; /* 5em = 20px * 5 = 100px */
border: 0.05em solid #000; /* 0.05em = 20px * 0.05 = 1px */
margin: 0.25em; /* 0.25em = 20px * 0.25 = 5px */
padding: 0.75em; /* 0.75em = 20px * 0.75 = 15px */
line-height: 1.5em; /* 1.5em = 20px * 1.5 = 30px */
}
</style>
<body>
<div></div>
</body>二、根据 px 计算出正确的 em
1.使用PXtoEM计算器
使用在线工具 PXtoEM（http://pxtoem.com/）可以轻松快捷的根据 px 计算出所需要的 em 值。
2.手动计算em
由下面的例子可以反向推导出 px 转 em 的计算公式
<style>
div {
font-size: 16px;
width: 2em; /* 2em = 16px * 2 = 32px */
}
</style>px = 参考文本大小 * em => em = px / 参考文本大小
3.注意事项
上面的公式中，“ 参考文本大小”需要格外注意：
-
如果元素自身设置了 font-size，那么参考文本大小就是自身的 font-size 大小
-
如果元素自身没有设置 font-size，那么参考文本大小就是父元素的 font-size 大小
-
为元素设置 font-size 时，如果使用 em 作为单位，那么参考文本大小是父元素的 font-size 大小
扫一扫
1291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
