CSS 經常使用方法小計

1.清除浮動

1st:
.clear{
    clear:both; height: 0; line-height: 0; font-size: 0
}

2ed:
.over-flow{
    overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問題
}

3rd:
.outer {zoom:1;}    /*IE6/7*/
.outer :after {
    clear:both;content:'.';display:block;
    width: 0;height: 0;visibility:hidden;
}   /*FF/chrome/opera/IE8*/

2.單行多行文字超出省略號

多行：
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-all;

單行：
width: 500px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

3.移動端meta

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
apple-mobile-web-app-capable : 刪除默認的蘋果工具欄和菜單欄
apple-mobile-web-app-status-bar-style : 控制狀態欄顯示樣式(頂部時間那一塊)

<meta name="renderer" content="webkit|ie-comp|ie-stand">
360瀏覽器設置成急速模式

4.頁面滾動穿透

當彈出 彈框的時候，給body設置overflow: hidden;
$('body').css('overflow','hidden');

彈框消失的時候，overflow: initial;
$('body').css('overflow','initial');

5.垂直水平居中

#parent {display: table}
#child{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

//css3
.verticalcenter{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

6.單詞換行中間加上

hyphens:auto

7.輸入框只能輸入數字

<input type="text" maxlength="3" onkeyup='this.value=this.value.replace(/\D/gi,"")'>

8.跨瀏覽器透明度

.transparent {
    filter: alpha(opacity=50); /* internet explorer */
    -khtml-opacity: 0.5;      /* khtml, old safari */
    -moz-opacity: 0.5;       /* mozilla, netscape */
    opacity: 0.5;           /* fx, safari, opera */
}

9.CSS開啓硬件加速

.cube {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
   /* Other transform properties here */
}

//webkit內核
.cube {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

10.Chrome and Safari中，使用CSS transforms 或者 animations閃爍

.cube {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;
 
   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
   /* Other transform properties here */
}

11.placeholder 不垂直居中

line-height: normal;
    
    input::-webkit-input-placeholder { /* WebKit browsers */
      line-height: 1.5em;
    }
    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      line-height: 1.5em;
    }
    input::-moz-placeholder { /* Mozilla Firefox 19+ */
      line-height: 1.5em;
    }
    input:-ms-input-placeholder { /* Internet Explorer 10+ */
      line-height: 1.5em;
    }

12.placeholder 顏色

<input type="text" placeholder="我愛北京天安門" value=" ">

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #f00;  
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #f00;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #f00;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #f00;
}