經常使用css 樣式整理

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:2px; //設置每一個字符之間的間距

5.設置段落首行縮進

text-indent:2em;//首行縮進兩個字符

6.顏色透明值設置問題

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

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

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

overflow:hidden;//隱藏滾動條
resize:none;//禁止拖拽修改textarea大小

input的標籤屬性
1.list 屬性：引用包含輸入字段的預約義選項的 datalist ，可用於作一個搜索框具有提示功能。css3

<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.多圖片、文件選取功能。multipleweb

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

input的樣式屬性chrome

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;