小强ORG

弹性布局一般使用em和%为单位，但是他们的属性和相对值却完全不一样。

首先是em字体高，继承父元素字体大小，但是本元素大部分数值属性（width，height，line-height，margin，border，padding等）都是参照本身字体大小。例如父元素font-size：1em=10px，子元素font-size：2em=20px，而子元素width：2em=40px。

一个小例子代码如下：

body {
	font:62.5%/2em Microsoft YaHei, Arial, Tahoma, Helvetica, SimSun, san-serif;
	height:100%;
	position:relative;
	text-align:center;
	background:#A5CEEF;
}
.divEm{ width:10em; height:10em; border:1em solid #000; background-color:#999; font-size:1em;}
.div2Em{ width:2em; height:2em; border:1em solid #000; background-color:#666; font-size:2em; margin:1em; padding:1em}
<div class="divEm">dieEm测试
	<div class="div2Em">die2Em测试</div>
</div>

1. 转换成px值即divEm：font-size=1em=10em，width=10em=100px，height=10em=100px，
   border=1em=10px，margin=1em=10px，padding=1em=10px；
2. div2Em：font-size=2em=20px，width=2em=40px，height=2em=40px，
   border=1em=20px，margin=1em=20px，padding=1em=20px；效果如下图

em盒模型相对值

使用绝对定位的top，left，right，bottom值也是参考本身元素字体高度。