CSS3常用知識

1.文本超出部分顯示為...

white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;

2.文本超出多行結尾部分展示為...

height: 46px;                //它的值為行高乘以顯示的行數
line-height: 23px;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;        //顯示的行數
-webkit-box-orient: vertical;

3.透明度

     filter: alpha(opacity=50);  
 -moz-opacity: 0.5;  
-khtml-opacity: 0.5;  
    opacity: 0.5;

4.去掉input在IOS系統上默認樣式

input{
    -webkit-appearance: none;
  appearance: none;
}
input:-webkit-autofill{
   -webkit-box-shadow:0 0 0 1000px #f0f0f0 inset !important;
}

5.圓角

-webkit-border-radius: 4px;
   -moz-border-radius: 4px;
        border-radius: 4px;
//值為50px時為一個完整的圓
//如果設置為4個值，它們對應的方向依次是：左上角、右上角、右下角、左下角（順時針方向）

6.段落首行文字縮進

text-indent:2em;

7.背景圖片自適應

background-size: cover;

8.選擇器

div:first-child{}    //選擇首元素
div:nth-child(x){}   //選擇第x個元素
div:last-child{}     //選擇尾元素

9.換行

word-wrap: break-word;//讓換行點換行
word-break: break-all;//所有的都換行（英文也可以）

強制不換行
white-space:nowrap;
    
自動換行
word-wrap:break-word;
word-break:normal;
    
強制英文單詞斷行
word-break:break-all;

10.使文字在垂直水平方向都居中

display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-box-align: center;
box-pack: center;
box-align: center;

11.兩端對齊

text-align:justify;
text-justify:inter-ideogra;

12.去掉Webkit(chrome)瀏覽器中input和textarea的×××焦點框

input,button,select,textarea{ outline:none;}
textarea{ font-size:13px; resize:none;}

13. ie6: position:fixed

.fixed-top{position:fixed;bottom:auto;top:0; } /* position fixed Top */
* html .fixed-top{
    position:absolute;
    bottom:auto;
    top:expression(eval(document.documentElement.scrollTop));
} /* IE6 position fixed Top */
*html{
    background-p_w_picpath:url(about:blank);
    background-p_w_upload:fixed;
}

14. clearfix清除浮動   

終極版一：
.clearfix:after { 
   content:"\200B"; 
   display:block; 
   height:0; 
   clear:both; 
} 
.clearfix {*zoom:1;}/*IE/7/6*/

終極版二：
.clearfix:before,.clearfix:after{ 
  content:""; 
  display:table; 
} 
.clearfix:after{clear:both;} 
.clearfix{ 
    *zoom:1;/*IE/7/6*/
}
    
.clearfix:before,.clearfix:after{display:table;content:"",line-height:0;}
.clearfix:after{clear:both;}

15. seperate-table

.tab{
    border-collapse:separate;
    border:1px solid #e0e0e0;
}
.tab th,.tab td{
    padding:3px;
    font-size:12px;
    background:#f5f9fb;
    border:1px solid;
    border-color:#fff #deedf6 #deedf6 #fff;
}
.tab th{background:#edf4f0;}
.tab tr.even td{background:#fff;}

<table class="tab" width="100%" cellpadding="0" cellspacing="0" border="0"> 
    <tr>
       <th>111</th>
       <td>222</td>
    </tr>
    <tr>
       <th>111</th>
       <td>222</td>
    </tr>
</table>

 16. min-height: 最小高度兼容代碼

.minheight500{
    min-height:500px;
    height:auto !important;
    height:500px;
    overflow:visible;
}

17. 鼠標不允許點擊： 

 cursor:not-allowed;

18. mac font: osx平臺字體優化
 

font-family:"Hiragino Sans GB","Hiragino Sans GB W3",'微軟雅黑';

19.webkit 水平居中：

    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align: center;

 20.取消a鏈接的×××邊框：

    a{-webkit-tap-highlight-color:rgba(0,0,0,0);}

21.ie8下圖片帶邊框的問題

img{outline:none;border:none;}

22.水平垂直居中

.info{
margin: 0 auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}