1.滾動滾動時,想讓某一個區域保持位置不變,不隨着滾動條的滾動發生變化,只須要給該區域追加position:fixed css
2.須要某個塊級區域自動居中的話,只須要將該區域的寬度設置一下,而後添加 margin-left:auto,margin-right:auto;不可追加float屬性。或者直接將該區域放在<center>標籤中。 html
注:html5不支持center,可是主流瀏覽器都支持html4.01和以前的標準,所以center仍是能夠在適當的時機使用的,一樣放在center標籤中的元素同樣不可追加float屬性。 html5
3.對於不一樣的瀏覽器,css樣式每每是有區別,能夠用css hack來處理 web
#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可以省去不少麻煩。 chrome
5.某些瀏覽器默認狀況下給整個窗體加上了滾動條,好比ie7,要想去掉滾動條,只須要加上 瀏覽器
html, body { overflow: hidden;/*前提是不要滾動條*/ }
6.想讓div固定某一個寬度,高度隨瀏覽器自動變化,能夠設置 spa
.div { width: 120px; height: 100%; /*高度自動變化*/ position: absolute;/*這個屬性不可少*/ }
7.想讓文字超長後顯示省略號 firefox