如何讓某個元素充滿整個頁面？ 方法： 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%;}如何去掉超鏈接的虛線框？方法： a{outline:none;}IE7及更早浏覽器由於不支持outline屬性，需要通過JS的blur()方法來實現，如 如何容器透明，內容不透明？方法1： .outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;} .inner{width:200px;height:200px;margin-top:-200px;} 我是不透明的內容原理是容器層與內容層並級，容器層設置透明度，內容層通過負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;} 我是不透明的內容 高級浏覽器直接使用rgba顏色值實現；IE浏覽器在定義容器透明的同時，讓子節點相對定位，也可達到效果 如何讓整個頁面水平居中？方法： body{text-align:center;} #test2{width:960px;margin:0 auto;text-align:left;}定義body的text-align值為center將使得IE5.5也能實現居中 為什麼容器的背景色沒顯示出來？為什麼容器無法自適應內容高度？方法： 清除浮動，方法請參考本頁第9條通常出現這樣的情況都是由於沒有清除浮動而引起的，所以Debug時應第一時間想到是否有未清除浮動的地方 如何做1像素細邊框的table？ 方法1： #test{border-collapse:collapse;border:1px solid #ddd;} #test th,#test td{border:1px solid #ddd;} 姓名 Joy Du 年齡 26 方法2： #test{border-spacing:1px;background:#ddd;} #test tr{background:#fff;} 姓名 Joy Du 年齡 26 IE7及更早浏覽器不支持border-spacing屬性，但是可以通過table的標簽屬性cellspacing來替代。 如何使頁面文本行距始終保持為n倍字體大小的基調？ 方法： body{line-height:n;}注意，不要給n加單位。Know More：如何使頁面文本行距始終保持為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;} 以圖換字之內容負縮進法該方法優點在於結構簡潔，不理想的地方：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 */} 以圖換字之內容隱藏法該方法優點在於兼容性強並且容易抽象成公用樣式，缺點在於結構較復雜 思路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;} 以圖換字之內容排擠法該方法優點在於結構簡潔，缺點在於： 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;} 以圖換字之超小字體+文本全透明法該方法結構簡單易用，推薦使用 為什麼2個相鄰div的margin只有1個生效？ 方法： .box1{margin:10px 0;} .box2{margin:20px 0;} box1 box2 本例中box1的底部margin為10px，box2的頂部margin為20px，但表現在頁面上2者之間的間隔為20px，而不是預想中的10+20px=30px，結果是選 擇2者之間最大的那個margin，我們把這種機制稱之為“外邊距合並”；外邊距合並不僅僅出現在相鄰的元素間，父子間同樣會出現。 簡單列舉幾點注意事項: 外邊距合並只出現在塊級元素上； 浮動元素不會和相鄰的元素產生外邊距合並； 絕對定位元素不會和相鄰的元素產生外邊距合並； 內聯塊級元素間不會產生外邊距合並； 根元素間不會不會產生外邊距合並（如html與body間）； 設置了屬性overflow且值不為visible的塊級元素不會與它的子元素發生外邊距合並； 如何清除圖片下方出現幾像素的空白間隙？方法1： img{display:block;}方法2： img{vertical-align:top;}除了top值，還可以設置為text-top middle bottom text-bottom，甚至特定的和值都可以 方法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標簽選擇符上即可 如何使文本溢出邊界不換行強制在一行內顯示？方法： #test{width:150px;white-space:nowrap;}設置容器的寬度和white-space為nowrap即可，其效果類似標簽 如何使文本溢出邊界顯示為省略號？方法（此方法Firefox5.0尚不支持）： #test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}首先需設置將文本強制在一行內顯示，然後將溢出的文 本通過overflow:hidden截斷，並以text-overflow:ellipsis方式將截斷的文本顯示為省略號。 如何使連續的長字符串自動換行？ 方法： #test{width:150px;word-wrap:break-word;}word-wrap的break-Word值允許單詞內換行 如何清除浮動？方法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{cursor:pointer;}若將cursor設置為hand，將只有IE和Opera支持，且hand為非標准屬性值 如何讓已知高度的容器在頁面中水平垂直居中？方法： #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的寬度和高度（即如何設置內聯元素的寬高）？ 方法： span{display:block;width:200px;height:100px;}要使內聯元素可以設置寬高，只需將其定義為塊級或者內聯塊級元素即可。所以方法非常多 樣，既可以設置display屬性，也可以設置float屬性，或者position屬性等等。 如何給一個元素定義多個不同的CSS規則？ 方法： .a{color:#f00;} .b{background:#eee;} .c{background:#ccc;} 測試1 測試2 多個規則之間使用空格分開，並且只有class能同時使用多個規則，id不可以 如何清除浮動？方法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{cursor:pointer;}若將cursor設置為hand，將只有IE和Opera支持，且hand為非標准屬性值 如何讓已知高度的容器在頁面中水平垂直居中？方法： #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的寬度和高度（即如何設置內聯元素的寬高）？方法： span{display:block;width:200px;height:100px;}要使內聯元素可以設置寬高，只需將其定義為塊級或者內聯塊級元素即可。所以方法非常多 樣，既可以設置display屬性，也可以設置float屬性，或者position屬性等等。 如何在文本框中禁用中文輸入法？ 方法： input,textarea{ime-mode:disabled;}ime-mode為非標准屬性，寫該文檔時只有IE和Firefox支持 如何解決列表中list-style-image不能精准定位的問題？ 方法： 不使用list-style-image來定義列表項目標記符號，而用background-image來代替，並通過background-position來進行定位如何解決偽對象: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。如果這個過渡或動畫效果是必須，可以考慮使用真實對象。