1. 強制文字單行顯示並將溢位文字以省略號顯示

white-space:nowrap;//強制文字不換行
text-overflow:ellipsis;//溢位文字以省略號顯示
overflow:hidden;
/*
text-overflow: clip | ellipsis | ellipsis-word  三個屬性值：
clip:表示直接裁剪溢位的文字，不會顯示省略號，直接截斷。
ellipsis:文字溢位，顯示省略號（。。。）標記，省略標記代替最後一個字元。
ellipsis-word:同ellipsis相同，不同在於省略標記代替最後一個詞。
*/

2. 強制文字多行顯示並將溢位文字以省略號顯示

display:-webkit-box;//物件作為彈性伸縮盒子模型顯示 。
-webkit-box-clamp:2;//限制在一個塊元素顯示的文字的行數。 
-webkit-box-orient:horizontal | vertical;//設定框內子元素的排列方式。
text-overflow:ellipsis;
overflow:hidden;

3.css強制換行

word-break:break-all; /*支援IE，chrome，Firefox不支援*/
word-wrap:break-word;/*支援IE，chrome，Firefox*/

4.字元間距

letter-sapcing:2
 
px; //設定每個字元之間的間距

5.設定段落首行縮排

text-indent:2em;//首行縮排兩個字元

6.顏色透明值設定問題

background:#012356;//顏色設定
opacity:0.8;//透明度設定
/*該方法設定的透明度會導致整個框內元素都繼承了該透明度屬性，若要針對某一個元素的屬性設定透明度，如背景設定透明度，則建議採用*/
background:rgba(255,255,255,0.8)//針對背景顏色單獨設定透明度，但是IE8不識別。

7.input，textarea相關常用css樣式

textarea去掉拖拽大小，隱藏滾動條

overflow:hidden;//隱藏滾動條
 

resize:none;//禁止拖拽修改textarea大小

input的標籤屬性
1.list 屬性：引用包含輸入欄位的預定義選項的 datalist ，可用於做一個搜尋框具備提示功能。

<form action="doSomething()">
    <input type="url" list="url_list" name="link" />
    <datalist id="url_list">
        <option label="W3Schools" value="http://www.w3schools.com" />
        <option label="Google" value="http://www.google.com" />
        <option label="Microsoft" value="http://www.microsoft.com" />
    </datalist>
    <input type="submit" />
</form>
//程式碼來源w3school.

2.多圖片、檔案選取功能。multiple

<input type="file" name="img" multiple="multiple" />

input的樣式屬性

background:transparent;//背景透明；
outline:medium;//輸入框點選時去掉外框

//控制某一種型別的input框樣式
input[type="text"]{
    color:red;
}

8.針對父元素的某一個子元素設定樣式

parent:first-child{color:red}//針對父元素的第一個元素設定樣式
parent:nth-child(2){color:red}//針對父元素的第二個元素設定樣式
//括號內的值可以是數字也可是2n-1或odd(第奇數個元素）、2n或even（第偶數個元素）、3n+1(隔二取一)

9.背景漸變

//css3
background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);
//引數含義：起始位置，起始顏色，終止顏色

//IE瀏覽器實現漸變只能使用IE自己的濾鏡去實現
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);
//grandientType : 0代表豎向漸變，1代表橫向漸變

10.css3水平垂直居中

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