css前端易忘內容收錄

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

複製代碼
.testTD { float:left;/*這個屬性不可少;不然會將td的寬度撐開*/ width:300px; /*下面這兩句是實現省略號的.上邊的兩句也不可少 */ overflow:hidden; text-overflow:ellipsis;       
}
相關文章
相關標籤/搜索