CSS3常用知識(shí)

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

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

2.文本超出多行結(jié)尾部分展示為...

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

3.透明度

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

4.去掉input在IOS系統(tǒng)上默認(rèn)樣式

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時(shí)為一個(gè)完整的圓
//如果設(shè)置為4個(gè)值，它們對(duì)應(yīng)的方向依次是：左上角、右上角、右下角、左下角（順時(shí)針?lè)较颍?/pre>
6.段落首行文字縮進(jìn)
text-indent:2em;
7.背景圖片自適應(yīng)
background-size: cover;
8.選擇器
div:first-child{}    //選擇首元素
div:nth-child(x){}   //選擇第x個(gè)元素
div:last-child{}     //選擇尾元素
9.換行
word-wrap: break-word;//讓換行點(diǎn)換行
word-break: break-all;//所有的都換行（英文也可以）

強(qiáng)制不換行
white-space:nowrap;
    
自動(dòng)換行
word-wrap:break-word;
word-break:normal;
    
強(qiáng)制英文單詞斷行
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.兩端對(duì)齊
text-align:justify;
text-justify:inter-ideogra;
12.去掉Webkit(chrome)瀏覽器中input和textarea的×××焦點(diǎn)框
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清除浮動(dòng)    
終極版一：
.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. 鼠標(biāo)不允許點(diǎn)擊： 
 cursor:not-allowed;
18. mac font: osx平臺(tái)字體優(yōu)化
 
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下圖片帶邊框的問(wèn)題
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%);
}