em的理解

em

• 版本：CSS1

说明：

自己的理解：

注意地方:

• 浏览器默认大小为16px.

• 谷歌浏览器最小字体为12px.

• font-size;有继承性。

判断步骤：

【】看该元素本身有没有设置字体大小：

有：那么，boder、width、height、padding、margin、line-height”等值，都是相对字体大小的。

font-size*em值=等于实际需要值。 

 

 

 

1. (魔芋例子：
2. <h1>天空</h1>
3. h1 {font-size:10px;margin:2em;}    //那么margin的值为20px;
4. )

 

 

• 如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(注意有些标签自带font-size，比如h1~h6)

 

[]如果是自带font-size的。那么，需要计算两次。

1. body {font-size:10px;}
2. h1 {margin:2em;}//此时，h1的font-size为：2em。计算为body的font-size*2em.然后为font-size：20px。margin再次计算20px*2em=40px。此时，margin：40px;

 

 

【】没有设置，看父元素。

1. body {font-size:20px;}
2. p {margin:3em;}  //此时，由于最小字体为12px.那么20px*3em = 60px;

 

 

 

如果，文字的大小，没有设置（自己人为设置），那么就是相对于body的字体大小。

所以，font-size:2em. 就是32px.

 

1.  body {font-size:20px;}
2.     .bo {font-size:2em;color:red;}
3.     p {line-height:3em;}// line-height为120px

 

兼容性：

• 浅绿 = 支持
• 红色 = 不支持
• 粉色 = 部分支持

IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
6.0+	2.0+	4.0+	3.1+	3.5+	3.2+	2.1+	18.0+