css前端易忘內容收錄

1.滾動滾動時，想讓某一個區域保持位置不變，不隨着滾動條的滾動發生變化，只須要給該區域追加position：fixed

2.須要某個塊級區域自動居中的話，只須要將該區域的寬度設置一下，而後添加 margin-left:auto,margin-right:auto;不可追加float屬性。或者直接將該區域放在<center>標籤中。

注：html5不支持center，可是主流瀏覽器都支持html4.01和以前的標準，所以center仍是能夠在適當的時機使用的，一樣放在center標籤中的元素同樣不可追加float屬性。

3.對於不一樣的瀏覽器，css樣式每每是有區別，能夠用css hack來處理

#demo { background-color:blue; /*firefox*/ background-color:red\9; /*all ie*/ background-color:yellow\0; /*ie8*/ +background-color:pink; /*ie7*/ _background-color:orange; /*ie6*/ } :root #test { background-color:purple\9; }  /*ie9*/ @media all and (min-width:0px){ #test {background-color:black\0;} }  /*opera*/ @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  /*chrome and safari*/

/*記住以上css hack 便可處理大部分的css不兼容的問題*/ /*最好不要改變樣式的順序*/ /* 另外還有一些樣式能夠被多中瀏覽器識別 */ 

#demo {
　　*background-color:blue; /*ie七、ie6*/ }

4.important關鍵字具備很高的優先級，同時important關鍵字被很幾乎全部瀏覽器支持(ie6也部分支持)，所以能夠在界面設計過程當中適當的使用 !important可以省去不少麻煩。

5.某些瀏覽器默認狀況下給整個窗體加上了滾動條，好比ie7，要想去掉滾動條，只須要加上

html, body { overflow: hidden;/*前提是不要滾動條*/ }

 6.想讓div固定某一個寬度，高度隨瀏覽器自動變化，能夠設置

.div { width: 120px; height: 100%; /*高度自動變化*/ position: absolute;/*這個屬性不可少*/ }

7.想讓文字超長後顯示省略號

.testTD { float:left;/*這個屬性不可少;不然會將td的寬度撐開*/ width:300px; /*下面這兩句是實現省略號的.上邊的兩句也不可少 */ overflow:hidden; text-overflow:ellipsis;       
}