常用的29個CSS小技巧分享

本篇內容主要講解“常用的29個CSS小技巧分享”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“常用的29個CSS小技巧分享”吧!

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.為什么容器的背景色沒顯示出來？為什么容器無法自適應內容高度？
方法：

清除浮動
通常出現這樣的情況都是由于沒有清除浮動而引起的，所以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.設置IE下的iframe背景透明
方法：

設置iframe元素的標簽屬性allowtransparency="allowtransparency"然后設置iframe內部頁面的body背景色為transparent。不過由此會引發IE下一些其它問題，如：設置透明后的iframe將不能遮住select

29.解決Chrome在應用transition時頁面閃動的問題
方法：

-webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;
在Chrome下，使用過渡效果transition時有時會出現頁面閃動

到此，相信大家對“常用的29個CSS小技巧分享”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！