CSS实用的代码段

摘抄的一些代码还有自己总结的常用的代码~

1>浏览器样式统一

*｛
margin：0px;
padding:0px;
｝

2>清除浮动的方法

3>跨浏览器设置透明度

.transparent{
    filter:alpha(opacity=50);  /*IE*/
    -khtml-opacity:0.5; /*老版本的Safari*/
    -moz-opacity:0.5; /*Mozilla,Netscape*/ 
    opacity:0.5;  /*fx，Safari，Opera*/      
}

4>设置圆角

.circle{
    -webkit-border-radius:4px 2px 5px 10px;
    -moz-border-radius:4px 2px 5px 10px;
    -ms-border-radius:4px 2px 5px 10px; 
    -o-border-radius:4px 2px 5px 10px;
    border-radius:4px 2px 5px 10px;
｝

5>CSS字体属性简写（缩写）

.title{
    font:font-style font-variant font-weight font-size line-height font-family
}

6>强制垂直滚动条

html{height:101%}

7>设置自定义字体

@font-face{
    font-family:'calamus';
    src:url('pictos/calamus.eot'); /* IE9 */
    src:url('pictos/calamus.eot') format('embedded-opentype'),/*IE6-IE8*/
         url('pictos/calamus.ttf') format('truetype'),/*Safari,Android,IOS*/
         url('pictos/calamus.woff') format('woff),/*Modern Browers*/
         url('pictos/calamus.svg') format('svg');/*Legacy IOS*/
}
body{
    font-family:'calamus';
}

8>文本对齐方式

.content{
text-align:center;  /*把文本排列到中间。*/
text-align:left;     /*把文本排列到左边。默认值：由浏览器决定。*/
text-align:right;     /*把文本排列到右边。*/    
text-align:justify;     /*实现两端对齐文本效果。*/
text-align:inherit ;    /*规定应该从父元素继承 text-align 属性的值。*/
}

9>垂直居中内容

.content{
    min-height:6.5em;
    display:table-cell;
    vertical-align:middle;   
}

10>固定宽度的局中布局

.page{
    width:800px;
    margin:0 auto;   
}

 11>CSS3斑马条纹

tbody tr:nth-child(odd){
    background-color:#ccc;
}

 12>图片自适应大小

.logo{
    background-image:url('img/calamus.jpg');
    background-size:100%;
    width:100%;
    padding-top:30%;
    height:0;
    text-indent:-9999px;
}