什么是em单位，以及如何在CSS中使用它来设置字体大小？

CSS中，em是一个相对长度单位，表示相对于当前元素的字体大小。1em等于当前元素的字体大小。

CSS教程：简单理解em

em单位的定义

em是一个相对长度单位，它相对于父元素的字体大小，如果父元素的字体大小为16px，那么2em等于32px。

举例证明

 .div {   display: inlineblock;   fontsize: 16px; } .red {   fontsize: 2em; /* 32px */   padding: 1em; /* 16px */   width: 100px;   height: 100px;   backgroundcolor: red;   marginbottom: 100px; }

HTML代码：

 <div class="div">   <div class="red">123</div> </div>

在这个例子中，.red 的fontsize 是2em，即32px，而padding 是1em，即16px。

em的特性

1、相对性：em的值不是固定的，而是相对于父元素的字体大小。

2、继承性：em会继承父级元素的字体大小。

3、灵活性：使用em可以更方便地调整web文档及其HTML元素的字体大小、宽度、边距、边框等一系列属性。

4、计算复杂性：由于em是相对单位，使用时需要注意尺寸计算的复杂性。

em与px的转换

为了简化fontsize的换算，可以在CSS中的body选择器中声明Fontsize=62.5%，这样1em值变为16px*62.5%=10px，12px=1.2em，10px=1em。

相关问答FAQs

Q1: em和px有什么区别？

A1: em是相对单位，它相对于父元素的字体大小，而px是绝对单位，一旦设置就无法因为适应页面大小而改变。

Q2: 如何在IE浏览器下解决em的计算问题？

A2: 在IE浏览器下，可以通过将html标签样式中的62.5%改成63%，即html { fontsize: 63%; }来解决em的计算问题。