Skill And Experience

CSS技巧和經驗列表(以下實例預設執行環境都為Standard mode):

  1. 如何清除圖片下方出現幾像素的空白間隙?

    方法1:

    img{display:block;}

    方法2:

    img{vertical-align:top;}

    除了top值,還可以設定為text-top | middle | bottom | text-bottom,甚至特定的<length><percentage>值都可以

    方法3:

    #test{font-size:0;line-height:0;}

    #test為img的父元素

  2. 如何讓文字垂直對齊文字輸入框?

    方法:

    input{vertical-align:middle;}
  3. 如何讓單行文字在容器內垂直居中?

    方法:

    #test{height:25px;line-height:25px;}

    只需設定文字的行高等於容器的高度即可

  4. 如何讓超連結訪問後和訪問前的顏色不同且訪問後仍保留hover和active效果?

    方法:

    a:link{color:#03c;}
    a:visited{color:#666;}
    a:hover{color:#f30;}
    a:active{color:#c30;}

    按L-V-H-A的順序設定超連結樣式即可,可速記為LoVe(喜歡)HAte(討厭)

  5. 為什麼Standard mode下IE無法設定滾動條的顏色?

    方法:

    html{
    	scrollbar-3dlight-color:#999;
    	scrollbar-darkshadow-color:#999;
    	scrollbar-highlight-color:#fff;
    	scrollbar-shadow-color:#eee;
    	scrollbar-arrow-color:#000;
    	scrollbar-face-color:#ddd;
    	scrollbar-track-color:#eee;
    	scrollbar-base-color:#ddd;
    }

    將原來設定在body上的滾動條顏色樣式定義到html標簽選擇符上即可

  6. 如何使文字溢出邊界不換行強制在一行內顯示?

    方法:

    #test{width:150px;white-space:nowrap;}

    設定容器的寬度和white-space為nowrap即可,其效果類似<nobr>標簽

  7. 如何使文字溢出邊界顯示為省略號?

    方法(此方法Firefox5.0尚不支援):

    #test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

    首先需設定將文字強制在一行內顯示,然後將溢出的文字通過overflow:hidden截斷,並以text-overflow:ellipsis方式將截斷的文字顯示為省略號。

  8. 如何使連續的長字符串自動換行?

    方法:

    #test{width:150px;word-wrap:break-word;}

    word-wrap的break-word值允許單詞內換行

  9. 如何清除浮動?

    方法1:

    #test{clear:both;}

    #test為浮動元素的下一個兄弟元素

    方法2:

    #test{display:block;zoom:1;overflow:hidden;}

    #test為浮動元素的父元素。zoom:1也可以替換為固定的width或height

    方法3:

    #test{zoom:1;}
    #test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}

    #test為浮動元素的父元素

  10. 如何定義鼠標指針的光標形狀為手型並兼容所有瀏覽器?

    方法:

    #test{cursor:pointer;}

    若將cursor設定為hand,將只有IE和Opera支援,且hand為非標准屬性值

  11. 如何讓已知高度的容器在頁面中水平垂直居中?

    方法:

    #test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}

    Know More:已知高度的容器如何在頁面中水平垂直居中

  12. 如何讓未知尺寸的圖片在已知寬高的容器內水平垂直居中?

    方法:

    #test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
    #test p{*position:absolute;*top:50%;*left:50%;margin:0;}
    #test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}

    #test是img的祖父節點,p是img的父節點。Know More:未知尺寸的圖片如何水平垂直居中

  13. 如何設定span的寬度和高度(即如何設定內聯元素的寬高)?

    方法:

    span{display:block;width:200px;height:100px;}

    要使內聯元素可以設定寬高,只需將其定義為塊級或者內聯塊級元素即可。所以方法非常多樣,既可以設定display屬性,也可以設定float屬性,或者position屬性等等。

  14. 如何給一個元素定義多個不同的css規則?

    方法:

    .a{color:#f00;}
    .b{background:#eee;}
    .c{background:#ccc;}
    
    <div class="a b">測試1</div>
    <div class="a c">測試2</div>

    多個規則之間使用空格分開,並且只有class能同時使用多個規則,id不可以

  15. 如何讓某個元素充滿整個頁面?

    方法:

    html,body{height:100%;margin:0;}
    #test{height:100%;}
  16. 如何讓某個元素距離視窗上右下左4邊各10像素?

    方法:

    html,body{height:100%;margin:0;}
    html{_padding:10px;}
    #test{position:absolute;top:10px;right:10px;bottom:10px;left:10px;_position:static;_height:100%;}
  17. 如何去掉超連結的虛線框?

    方法:

    a{outline:none;}

    IE7及更早瀏覽器由於不支援outline屬性,需要通過js的blur()方法來實現,如<a onfocus="this.blur();"...

  18. 如何容器透明,內容不透明?

    方法1:

    .outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}
    .inner{width:200px;height:200px;margin-top:-200px;}
    
    <div class="outer"><!--我是透明的容器--></div>
    <div class="inner">我是不透明的內容</div>

    原理是容器層與內容層並級,容器層設定透明度,內容層通過負margin或者position絕對定位等方式覆蓋到容器層上

    方法2:

    .outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}
    .outer .inner{position:relative\9;}
    
    <div class="outer">
    	<div class="inner">我是不透明的內容</div>
    </div>

    高級瀏覽器直接使用rgba顏色值實現;IE瀏覽器在定義容器透明的同時,讓子節點相對定位,也可達到效果

  19. 如何讓整個頁面水平居中?

    方法:

    body{text-align:center;}
    #test2{width:960px;margin:0 auto;text-align:left;}

    定義body的text-align值為center將使得IE5.5也能實現居中

  20. 為什麼容器的背景色沒顯示出來?為什麼容器無法自適應內容高度?

    方法:

    清除浮動,方法請參考本頁第9條

    通常出現這樣的情況都是由於沒有清除浮動而引起的,所以Debug時應第一時間想到是否有未清除浮動的地方

  21. 如何做1像素細邊框的table?

    方法1:

    #test{border-collapse:collapse;border:1px solid #ddd;}
    #test th,#test td{border:1px solid #ddd;}
    
    <table id="test">
    	<tr><th>姓名</th><td>Joy Du</td></tr>
    	<tr><th>年齡</th><td>26</td></tr>
    </table>

    方法2:

    #test{border-spacing:1px;background:#ddd;}
    #test tr{background:#fff;}
    
    <table id="test" cellspacing="1">
    	<tr><th>姓名</th><td>Joy Du</td></tr>
    	<tr><th>年齡</th><td>26</td></tr>
    </table>

    IE7及更早瀏覽器不支援border-spacing屬性,但是可以通過table的標簽屬性cellspacing來替代。

  22. 如何使頁面文字行距始終保持為n倍字體大小的基調?

    方法:

    body{line-height:n;}

    注意,不要給n加單位。Know More:如何使頁面文字行距始終保持為n倍字體大小的基調

  23. 標准模式Standard mode和怪異模式Quirks mode下的盒模型區別?

    方法:

    標准模式下:Element width = width + padding + border
    怪異模式下:Element width = width

    相關資料請參閱CSS3屬性box-sizing

  24. 以圖換字的幾種方法及優劣分析

    思路1:使用text-indent的負值,將內容移出容器

    .test1{width:200px;height:50px;text-indent:-9999px;background:#eee url(*.png) no-repeat;}
    
    <div class="test">以圖換字之內容負縮進法</div>

    該方法優點在於結構簡潔,不理想的地方:1.由於使用場景不同,負縮進的值可能會不一樣,不易抽象成公用樣式;2.當該元素為連結時,在非IE下虛線框將變得不完整;3.如果該元素被定義為內聯級或者內聯塊級,不同瀏覽器下會有較多的差異

    思路2:使用display:none或visibility:hidden將內容隱藏;

    .test{width:200px;height:50px;background:#eee url(*.png) no-repeat;}
    .test span{visibility:hidden;/* 或者display:none */}
    
    <div class="test"><span>以圖換字之內容隱藏法</span></div>

    該方法優點在於兼容性強並且容易抽象成公用樣式,缺點在於結構較復雜

    思路3:使用padding或者line-height將內容擠出容器之外;

    .test{overflow:hidden;width:200px;height:0;padding-top:50px;background:#eee url(*.png) no-repeat;}
    .test{overflow:hidden;width:200px;height:50px;line-height:50;background:#eee url(*.jpg) no-repeat;}
    
    <div class="test">以圖換字之內容排擠法</div>

    該方法優點在於結構簡潔,缺點在於:1.由於使用場景不同,padding或line-height的值可能會不一樣,不易抽象成公用樣式;2.要兼容IE5.5及更早瀏覽器還得hack

    思路4:使用超小字體和文字全透明法;

    .test{overflow:hidden;width:200px;height:50px;font-size:0;line-height:0;color:rgba(0,0,0,0);background:#eee url(*.png) no-repeat;}
    
    <div class="test">以圖換字之超小字體+文字全透明法</div>

    該方法結構簡單易用,推薦使用

  25. 為什麼2個相鄰div的margin只有1個生效?

    方法:

    .box1{margin:10px 0;}
    .box2{margin:20px 0;}
    
    <div class="box1">box1</div>
    <div class="box2">box2</div>

    本例中box1的底部margin為10px,box2的頂部margin為20px,但表現在頁面上2者之間的間隔為20px,而不是預想中的10+20px=30px,結果是選擇2者之間最大的那個margin,我們把這種機制稱之為“外邊距合並”;外邊距合並不僅僅出現在相鄰的元素間,父子間同樣會出現。

    簡單列舉幾點注意事項:
     外邊距合並只出現在塊級元素上;
     浮動元素不會和相鄰的元素產生外邊距合並;
     絕對定位元素不會和相鄰的元素產生外邊距合並;
     內聯塊級元素間不會產生外邊距合並;
     根元素間不會不會產生外邊距合並(如html與body間);
     設定了屬性overflow且值不為visible的塊級元素不會與它的子元素發生外邊距合並;

  26. 如何在文字框中禁用中文輸入法?

    方法:

    input,textarea{ime-mode:disabled;}

    ime-mode為非標准屬性,寫該檔案時只有IE和Firefox支援

  27. 如何解決列表中list-style-image不能精准定位的問題?

    方法:

    不使用list-style-image來定義列表項目標記符號,而用background-image來代替,並通過background-position來進行定位
  28. 如何解決偽物件:before和:after在input標簽上的怪異表現的問題?

    現象:

    在編寫本條目時,除了Opera,在所有瀏覽器下input標簽使用偽物件:before和:after都沒有效果,即使Opera的表現也同樣令人詫異。大家可以試玩一下。瀏覽器版本:IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
  29. 如何解決偽物件:before和:after無法在Chrome,Safari,Opera上定義轉場和動畫的問題?

    現象:

    在編寫本條目時,除了Firefox,在所有瀏覽器下偽物件:before和:after無法定義轉場和動畫效果。瀏覽器版本:IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51。如果這個轉場或動畫效果是必須,可以考慮使用真實物件。