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。如果这个过渡或动画效果是必须,可以考虑使用真实对象。