css总结

1，为了兼容，所有能写高度的块状元素都要写高度。比如ie7下，父元素div如果不定死高度，则高度随意呢。

2，内联元素排一行的秘诀：此内联元素的父元素的高度要以内联元素的最高高度为准，则此内联元素排一行就可以垂直居中了。

代码如下：

 <style>

.gaituCheckBox {width:13px; height:13px;border:1px solid #dbdbdb; background-color:#ffffff; cursor:pointer; vertical-align:middle; display:inline-block;}
 .techContent { float:left; height:15px; line-height:15px; border:1px solid #e7e7e7;padding:6px 10px 7px 10px; color:#666666; width:auto; margin:0 10px 10px 0; cursor:pointer;-moz-user-select: none; /* 火狐 */-webkit-user-select: none; /* webkit浏览器 */-ms-user-select: none; /* IE10 */-khtml-user-select: none; /* 早期浏览器 */user-select: none;}
 .techContent .sapntechCon { vertical-align:middle; padding-left:5px;}
</style>
<div class="techContent"><span class="gaituCheckBox"></span><span class="sapntechCon">单面覆亚膜</span></div>

 3,当有特殊字体并且此字体大小大于要垂直居中的其他字时，设置display:inline-block会有毁灭性的不兼容效果，比如Verdana，设置其字体大小为20px，但是事实上有25px。此时建议使用vertical-align:middle及父容器line-height来解决此类问题。