这篇文章主要记录学习CSS过程中遇到的很好的小技巧，不断更新……

1、平时设置字体的时候总喜欢分开写，比如这样：

font-family: Arial, Helvetica; 
font-weight: bold; 
font-style: italic; 
font-size: 1em; 
line-height: 1.5em;

其实可以这样写：

font: bold italic 1em/1.5em Arial, Helvetica;

2、背景分开写成这样：

background: url(example.gif); 
background-color: #eaeaea ; 
background-repeat: repeat-x; 
background-position: top left;

其实可以写成一行，比如：

background: #eaeaea url(example.gif) repeat-x top left;

3、边框，css面板产生的边框样式很恐怖，比如：

border-color: red; 
border-width: 1px; 
border-style: solid;

其实，写成一行更好：

border: 1px solid red;

4、margin和padding简写：

/* top=10px, right=5px, bottom=15px, left=20px */ 
margin: 10px 5px 15px 20px; 
/* top=10px, right=5px, bottom=10px, left=5px*/ 
margin: 10px 5px; 
/* top=10px, right=5px, bottom=15px, left=5px*/ 
margin: 10px 5px 15px;
/*四边都一样*/
margin:10px;

padding类似的写法。

5、值为0的时候可以省略单位，比如：

margin: 0px; 
padding: 0em;

可以简写成：

margin: 0; 
padding: 0;

6、十六进制的颜色，比如#ffffff，可以简写成#fff，就是说#RRGGBB这样的值，可以简写成#RGB，小于1的小数，比如0.5em，可以简写成 .5em，表示50%的0.5，可以简写成 .5。

7、图片设置了浮动后，段落文字会包裹该图片，如果需要图片浮动，但是又不需要文字包裹图片，则可以为该段落添加如下样式：

.no-wrap-text { 
    overflow: hidden;
 }

8、清除在容器中图片下面有缝隙的办法

因为图片是inline对象，所以和文字一样，基于父元素的baseline对齐的，而baseline对齐的时候距离底部还有一点缝隙。就好像文字和文字的行之间是有缝隙一样。 所以只要设置vertical-align不为baseline就可以解决这个问题。 方法主要考虑两种：

1)、为父容器设置字体大小为0

div{
    font-size:0;}

2)、为图片定义垂直对齐方式

img{
    vertical-align:bottom;
}

当然，还有一种是把img设置为block，这样就改变了图片的默认类型。而且图片设置了block之后，不能继承p的首行缩进的样式。

9、clearfix清除浮动导致的高度不自适应的方法：

如果要兼容低版本的浏览器，代码如下：

.clearfix:after{   
    visibility: hidden;   
    display: block;   
    font-size: 0;   
    content: " ";   
    clear: both;   
    height: 0; 
    } 
* html .clearfix { zoom: 1; } /* IE6 */ 
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

或者用

.clearfix {zoom: 1;} /* IE < 8 */

代替：

* html .clearfix { zoom: 1; } /* IE6 */ 
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

如果不用考虑低版本浏览器，则可以使用最精简的方法：

.clearfix:after {     
    content:"";     
    display:block;     
    clear:both; 
    }

当然，也发现有这样的写法：

.clearfix:after {     
    content:" ";
    display:table;
    clear:both; }

如果用display:table而不是display:block，可能导致容器额外的边距。

10、为div设置100%的高度的时候，还需要为html、body设置100%的高度才有效果。

html,body{
    width:100%;
    height:100%;/*最根溯源，还是要html有高度，后面的后代元素才能继承高度。*/
}
div{
    width:180px;
    height:100%;
}

11、文章标题不换行的时候，溢出的部分用省略号代替。

li{
    white-space:nowrap;/*文本不换行*/
    overflow:hidden;/overflow为非visible的值才起作用。/
    text-overflow:ellipsis;/*如果文字溢出，可以用省略号代替*/
}

12、多个li并排的时候，有一方的外边距，ul没有内边距，两方对齐ul的边框，可以让ul设置一个外边距的负值。

ul{
margin-right:-20px;}
ul li{
width:280px;
height:310px;
float:left;
margin:0 20px 15px 0;
}

13、当容器的宽度不固定的时候，可以设置为表格显示方式实现水平居中对齐。

div{
display:table;
width:auto;
margin:0 auto;
}

14、当容器的高度固定的时候，容器内多行文本实现纵向居中对齐，因为vertical-align只对td、th有用。

div{
height:378px;
display:table-cell;
vertical-align:middle;}

15、当容器设置圆角半径的时候，如果是背景图片，则图片也直接圆角，如果是插入的普通图片，则需要设置溢出隐藏。

.girlszuopin li{
	text-align:left;
	border-radius:5px;
	overflow:hidden;}

16、取消超链接a被点击时候的虚线框

a:focus{ /*需要用到:focus伪类*/
outline:none;
}

17、margin的负值

margin左右的负值在增加block对象的宽度上有妙用。上下的负值产生位置的移动。

比如列表左右对齐的卡片布局。

#container{
width:1200px;
background: #eee;
margin-right:-20px;
overflow: hidden;
}
#container ul{
width:1220px;
}
#container li{
width:224px;
height: 300px;
background: #ddd;
float: left;
margin: 0 20px 20px 0;
}