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
 }

CSS字体属性简写（缩写）

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;
 }

CSS3斑马条纹

12>图片自适应大小

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