CSS技巧代码搜刮

1、第一收录：图片居中（注：.box 最好用在img的父级元素上，而不要是祖父级），附链接参考：

 

http://www.cssrain.cn/article.asp?id=870  ，http://www.planabc.net/2006/11/20/css_vertical_center_solution/，

http://www.student.oulu.fi/~laurirai/www/css/middle/     （英文）

 

<style>
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;

/*设置水平居中*/
text-align:center;

/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/

width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
</style>

 

2、简单且兼容所有浏览器的清除浮动写法：（来源http://www.ajaxbbs.net/post/webFront/simple-clear-float.html）

 

另外收录一个： 清理浮动的全家  http://www.twinsenliang.net/skill/20090413.html

 

.clearfix {zoom:1} 
.clearfix:after { 
content: '\20';  
display: block;  
clear: both;  
}

 

 

写道

对于IE只要使元素拥有Layout属性即可清除浮动，方法有很多，如height:1%,overflow:hidden,zoom:1等，但我们一般应选取尽可能不造成副作用的方式，即最优办法是采用zoom:1的办法。

对于符合标准的浏览器，一般采用CSS的:after伪类为浮动元素后面增加一个清除浮动的元素来实现。上面的代码通过增加一个.号，然后通过clear:both;display:block来清除浮动，然后通过visibility:hidden和height:0来隐藏这个点号。

content:'\20'指定在浮动列表后增加一个空白字符，首先这个字符不可见，无需visibility:hidden来隐藏，其次他没有高度，无需height:0来隐藏其高度。因此这样就大大简化了原来的代码同时也达到了清除浮动的目的。