下面是分享一些前端開發中CSS常用技巧及經驗的相關內容，文章教程主要講述與前端開發 技巧 經驗 相關的一些技術與知識，更多的內容歡迎大家訪問http://www.survivalescaperooms.com,獲取更多最新教程,下面是教程講解：

  如何讓某個元素充滿整個頁面？ ​ 方法：   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。如果這個過渡或動畫效果是必須，可以考慮使用真實對象。