Skill And Experience
- CSS技巧和經驗集合
CSS技巧和經驗列表（以下實例默認運行環境都爲Standard mode）：
如何清除圖片下方出現幾像素的空白間隙？
方法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的父元素
如何讓文本垂直對齊文本輸入框？
方法：
input{vertical-align:middle;}如何讓單行文本在容器內垂直居中？
方法：
#test{height:25px;line-height:25px;}只需設置文本的行高等於容器的高度即可
如何讓超鏈接訪問後和訪問前的顏色不同且訪問後仍保留hover和active效果？
方法：
a:link{color:#03c;} a:visited{color:#666;} a:hover{color:#f30;} a:active{color:#c30;}按L-V-H-A的順序設置超鏈接樣式即可，可速記爲LoVe（喜歡）HAte（討厭）
爲什麼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標籤選擇符上即可
如何使文本溢出邊界不換行強制在一行內顯示？
如何使文本溢出邊界顯示爲省略號？
方法（此方法Firefox5.0尚不支持）：
#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}首先需設置將文本強制在一行內顯示，然後將溢出的文本通過overflow:hidden截斷，並以text-overflow:ellipsis方式將截斷的文本顯示爲省略號。
如何使連續的長字符串自動換行？
如何清除浮動？
方法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爲浮動元素的父元素
如何定義鼠標指針的光標形狀爲手型併兼容所有瀏覽器？
如何讓已知高度的容器在頁面中水平垂直居中？
方法：
#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}Know More：已知高度的容器如何在頁面中水平垂直居中
如何讓未知尺寸的圖片在已知寬高的容器內水平垂直居中？
方法：
#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：未知尺寸的圖片如何水平垂直居中
如何設置span的寬度和高度（即如何設置內聯元素的寬高）？
如何給一個元素定義多個不同的css規則？
方法：
.a{color:#f00;} .b{background:#eee;} .c{background:#ccc;} <div class="a b">測試1</div> <div class="a c">測試2</div>多個規則之間使用空格分開，並且只有class能同時使用多個規則，id不可以
如何讓某個元素充滿整個頁面？
方法：
html,body{height:100%;margin:0;} #test{height:100%;}如何讓某個元素距離窗口上右下左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%;}如何去掉超鏈接的虛線框？
如何容器透明，內容不透明？
方法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>方法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瀏覽器在定義容器透明的同時，讓子節點相對定位，也可達到效果
如何讓整個頁面水平居中？
方法：
body{text-align:center;} #test2{width:960px;margin:0 auto;text-align:left;}定義body的text-align值爲center將使得IE5.5也能實現居中
爲什麼容器的背景色沒顯示出來？爲什麼容器無法自適應內容高度？
如何做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來替代。
如何使頁面文本行距始終保持爲n倍字體大小的基調？
標準模式Standard mode和怪異模式Quirks mode下的盒模型區別？
方法：
標準模式下：Element width = width + padding + border 怪異模式下：Element width = width
相關資料請參閱CSS3屬性box-sizing
以圖換字的幾種方法及優劣分析
思路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>該方法結構簡單易用，推薦使用
爲什麼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的塊級元素不會與它的子元素髮生外邊距合併；如何在文本框中禁用中文輸入法？
方法：
input,textarea{ime-mode:disabled;}ime-mode爲非標準屬性，寫該文檔時只有IE和Firefox支持
如何解決列表中list-style-image不能精準定位的問題？
方法：
如何解決僞對象:before和:after在input標籤上的怪異表現的問題？
現象：
在編寫本條目時，除了Opera，在所有瀏覽器下input標籤使用僞對象:before和:after都沒有效果，即使Opera的表現也同樣令人詫異。大家可以試玩一下。瀏覽器版本：IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51如何解決僞對象:before和:after無法在Chrome,Safari,Opera上定義過渡和動畫的問題？
現象：
在編寫本條目時，除了Firefox，在所有瀏覽器下僞對象:before和:after無法定義過渡和動畫效果。瀏覽器版本：IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51。如果這個過渡或動畫效果是必須，可以考慮使用真實對象。
Copyright © 2006-2012 Doyoe. All Rights Reserved