CSS实用的代码段

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一些常用的css代码~

1. 浏览器样式统一

1 *｛
2 margin：0px;
3 padding:0px;
4 ｝

2. 清除浮动的方法

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

3. 跨浏览器设置透明度

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

4. 设置圆角

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

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

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

6. 强制垂直滚动条

1 html{height:101%}

7. 设置自定义字体

 1 @font-face{
 2     font-family:'calamus';
 3     src:url('pictos/calamus.eot'); /* IE9 */
 4     src:url('pictos/calamus.eot') format('embedded-opentype'),/*IE6-IE8*/
 5          url('pictos/calamus.ttf') format('truetype'),/*Safari,Android,IOS*/
 6          url('pictos/calamus.woff') format('woff),/*Modern Browers*/
 7          url('pictos/calamus.svg') format('svg');/*Legacy IOS*/
 8 }
 9 body{
10     font-family:'calamus';
11 }

8. 文本对齐方式

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

9. 垂直居中内容

1 .content{
2     min-height:6.5em;
3     display:table-cell;
4     vertical-align:middle;   
5 }

10. 固定宽度的局中布局

1 .page{
2     width:800px;
3     margin:0 auto;   
4 }

 11. CSS3斑马条纹

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

 12. 图片自适应大小

1 .logo{
2     background-image:url('img/calamus.jpg');
3     background-size:100%;
4     width:100%;
5     padding-top:30%;
6     height:0;
7     text-indent:-9999px;
8 }

13. css自定义滚动条

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
    width:16px;
    height:16px;
    background-color:#F5F5F5;
}
/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
    border-radius:10px;
    background-color:#F5F5F5;
}
/*定义滑块
 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius:10px;
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
    background-color:#555;
}