HTML语言中Em单位,HTML5中单位em的理解

相关链接

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大小