HTML5中单位em的理解

相关链接

http://www.runoob.com/cssref/css-units.html
http://blog.csdn.net/h_o_l_y/article/details/51852202

em何意？

它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；

---

1em=元素中文本的1个垂直高度
如果元素中文本的大小为16px，那么1em=16px;如果元素中文本大小为20px,那么1em==20px

PS:相对长度，相对于当前应用内文本的字体尺寸。

字体单位使用em能支持IE6下的字体缩放，在页面中按ctrl+滚轮，字体以px为单位的网站没有反应。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%，这就使em值变为 16px62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了*。

em的特点

• em的值不固定
• em会继续父级元素的字体大小

举个例子

例一，

默认情况下1em=16px，如何改变这个默认值呢？
body {
    font-size: 24px;//修改font-size就可以更改默认值
    width: 10em;    /* 10em = 24px * 10 = 240px */
}

例二，

body {
        font-size: 12px;
    }
    div {
        /* 该元素没有设置font-size，因此继承了父元素的font-size: 12px; */
        width: 10em;    /* 10em = 12px * 10 = 120px */
    }

例三，

body {
        font-size: 12px;
    }
    //子元素设置了font-size，但是单位不一样怎么算呢？
    div {
        font-size: 2em; /* 2em = 12px * 2 = 24px */
        width: 10em;    /* 10em = 24px * 10 = 240px */
    }

注意：

• 如果元素自身设置了font-size，那么参考文本大小就是自身的font-size大小
• 如果元素自身没有设置font-size，那么参考文本大小就是父元素的font-size大小
• 为元素设置font-size时，如果使用em作为单位，那么1em＝父元素的font-size大小