之前看过张鑫旭的博客
页面重构“鑫三无准则” 之“无宽度”准则：http://www.zhangxinxu.com/wordpress/?p=1152
CSS流体(自适应)布局下宽度分离原则：http://www.zhangxinxu.com/wordpress/?p=1463
我所知道的几种display:table-cell的应用：http://www.zhangxinxu.com/wordpress/?p=1187
在测试table-cell下无宽度准则时，想试试固定高度的无高度准则，发现table-cell下容器的高度会发生奇妙的变化。
容器固定高度和宽度各300px，不设置display属性，结果如下：
1 <div style="300px; height:300px; background-color:#06F;"> 2 <div style="height:100%; border:#903 solid 10px; padding:10px;">123456</div> 3 </div>
在给子元素设定高度100%，border和padding各10px后，子元素被撑大了，其实际高度是300+20+20=340px。
给子元素添加display:table-cell属性，其余属性不变，结果如下：
1 <div style="300px; height:300px; background-color:#06F;display:table-cell;"> 2 <div style="height:100%; border:#903 solid 10px; padding:10px;">123456</div> 3 </div>
可以看到设置高度为100%后，改变边框宽度和padding值，元素会自动缩小或加大实际内容的高度，确保实际高度+border+padding=设置高度。
PS:仅针对高度有效，测试给子元素添加100%属性后，宽度会被撑大，不过依照张鑫旭的宽度分离原则，宽度是设置在父级元素上，所以子元素宽度自适应就行了。
以上测试浏览器：chrome版本 36.0.1985.125
最近在IE8和火狐13和火狐33测试高度被撑大了，是340px，估计是chrome的一个bug