小知識

一、 CSS選擇器優先級

  行內樣式（經過Style=""定義） 1000；

  ID選擇器 100；

  Class類選擇器 10；

  類型選擇器 1

  數值越大優先級越高

  例如：

　Style="" 優先級爲1000；#wrapper #content {}優先級爲 100*2＝200； #content.datePosted {}優先級爲 100+10＝110；div#content {}優先級爲 1+100＝101

2、頁腳居底

 1 html, body {
 2         margin:0;    /* 必要，不然縱向滾動條不會消失 */
 3         height:100%; /* 必要，以便以後給container設置高度百分比 */
 4     }
 5 #wrapper {
 6         min-height:100%; /* 此屬性須要doctype的支持，見第一行。 不然不會生效。在IE中，寫height：100%就能夠工做，但其餘瀏覽器須要設置min-height。*/
 7         position:relative; /* 必要 */
 8     }
 9 #main {
10         padding-bottom:120px;    /* 等於footer的高度 */
11     }
12 #footer {
13         position:absolute; /* 必要 */
14         bottom:5px; /* 必要 */
15     }

View Code

3、CSS3圓角

圓角(border-radius)

支持瀏覽器:IE九、Safari、Chrome、Firefox;(儘可能使用最新版本,具體到哪一個版本支持亦或不支持請百度)

不支持瀏覽器:IE6~8;

-moz-border-radius   兼容Firefox瀏覽器;

-webkit-border-radius   兼容Safari,Chrome瀏覽器;

對於Opera和IE請使用border-radius;

也就是說要兼容如今的瀏覽器須要3個屬性同時寫:border-radius,-moz-border-radius,-webkit-border-radius;如：

border:5px solid #dedede;

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;

四、塊元素超長內容變省略號的問題

    overflow: hidden;

    white-space: nowrap;

    -o-text-overflow: ellipsis; /* for Opera */

    text-overflow: ellipsis; /* for IE */

基本通殺全部瀏覽器了~

認非塊的元素,要加上display:block;纔有效果哦`,..嗯嗯,別忘了width或者max-width.