小强ORG

自从写了这个皮肤之后，总结一下关于弹性布局的一些注意事项。由于小弟是新手，而且很久没练习页面了，很多地方只是总结一下基础知识，希望大虾们不吝赐教。

由于弹性布局使用想对单位em或者%，都是比较难计算的，因为想对单位都比较难计算。所以这里使用单位初始化，主要是针对em的。

根据漫谈font-size一文学习到了，基于windows的浏览器大部分默认的字体大小是medium，即 16ppem下显示为16px。根据前辈提供的转换表，在样式里加了body { font-size:62.5%}，这样有两个好处：

1. 1em=10px计算宽度高度更加方便（针对body子元素，孙子元素另算，以这个为基础）
2. font-size：1.2em计算字体大小更加方便，不用根据16px计算。不过设置字体大小后子元素的字体大小会继承父元素的，计算起来也挺麻烦的。

针对body { font-size:62.5%}还是body { font-size:63%}的问题我也纠结了一会。测试IE下body { font-size:62.5%}都会比正常像素值少，而使用body { font-size:63%}又会比正常像素值多。FF下body { font-size:62.5%}完美表现，body { font-size:63%}略大。详细测试结果如下图，上面是使用em为单位的div，下面是使用px为单位的div：

测试代码：

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