CSS样式适配杂记

1.问：input框的对齐，制作类似百度搜索框的时候，发现IE下前面输入框和后面按钮总是不能对齐。

解答：给input框增加vertical-align:bottom;

2.问：IE下display:inline-block不起作用。

答：display:inline-block后面增加*display:inline;*zoom:1;具体参见：带你深入剖析inline-block属性值的前世今生。该文对inline-block有详细分析。

3.问：如何取消inline-block元素之间的间距。

答：1.给父盒子设置font-size：0，再把当前元素的font-size设回。2.给当前元素设置float:left。

4.问：如何清除浮动

答：1.在需要清除浮动的盒子内添加额外的元素并设置clear:both.

　　　2.需要清除浮动的盒子设置overflow:hidden。前提是该盒子没有height属性。

　　　3.给父元素添加.clearfix类，并设置样式如下：　　　

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom:;
}

5.height和line-height:行内元素没有height属性。

6.div居中：给父元素设置文字居中，再给子元素设置margin:0 auto。

7.让div刚好占满整个屏幕：给div本身和其所有父元素（html，body...）设置height和width100%；

8.需要事件触发的动画用transition实现，不需要事件触发的动画用animation实现。