本文向大家介紹一下margin負(fù)值的相關(guān)應(yīng)用，主要從四個(gè)方面來(lái)向大家講解，相信本文介紹一定會(huì)讓你有所收獲。

margin負(fù)值的相關(guān)應(yīng)用

1.頁(yè)面上實(shí)現(xiàn)CSSsprite背景定位效果

關(guān)于頁(yè)面上背景定位效果，可以參見(jiàn)我的文章“IE6下png背景不透明問(wèn)題的綜合拓展”有關(guān)頁(yè)面上定位的demo實(shí)例頁(yè)面

2.在流動(dòng)性布局中的應(yīng)用

流動(dòng)性布局又稱自適應(yīng)布局，也稱為寬度不固定布局。比如WordPress經(jīng)典的兩欄式不固定布局就是使用的margin負(fù)值實(shí)現(xiàn)的定位，屬于左右margin負(fù)值在流動(dòng)性布局中的應(yīng)用，有興趣的同學(xué)可以稍微看看框架的樣式代碼，會(huì)學(xué)到些東西的。還有一類兩欄自適應(yīng)需要用到margin的上下負(fù)值，尤其在一欄高度固定，另外一欄高度不定的兩欄或多欄布局中。

高度不固定欄和高度固定的欄上下錯(cuò)開(kāi)，均無(wú)浮動(dòng)屬性，高度不固定的欄margin-top一個(gè)負(fù)值，負(fù)值的大小就是高度固定欄的高度，這樣，就實(shí)現(xiàn)了兩欄在同一水平線上。且寬度自適應(yīng)，由于沒(méi)有浮動(dòng)，所以不同擔(dān)心內(nèi)部存在clear:both屬性，破快浮動(dòng)。這里沒(méi)有例子，講得有點(diǎn)虛，您可以先把這個(gè)放一放，因?yàn)殛P(guān)于流動(dòng)性布局（寬度自適應(yīng)布局）我會(huì)好好地寫(xiě)一篇文章的，到時(shí)，有關(guān)margin負(fù)值在流動(dòng)性布局中的應(yīng)用我會(huì)好好的講述的。

3.在選項(xiàng)卡等邊框線的處理

下圖顯示的是一種比較常見(jiàn)的選項(xiàng)卡樣式，舊版的迅雷首頁(yè)就是這樣子的選項(xiàng)卡。

◆如何用最簡(jiǎn)介最易維護(hù)的CSS代碼寫(xiě)出這樣的樣式效果呢？

我其實(shí)已經(jīng)在圖上做了點(diǎn)小小的標(biāo)注，使用margin-top:-1px;解決選項(xiàng)卡下邊框顯示的問(wèn)題。
關(guān)于具體如何編寫(xiě)實(shí)現(xiàn)此效果，建議您狠狠地單擊這里進(jìn)入demo實(shí)例頁(yè)面，會(huì)有所幫助的。

類似的，如果您要用四個(gè)div實(shí)現(xiàn)5條1像素的左右邊框，就像表格一樣的效果，就可以使用讓每個(gè)div都有左右1像素的邊框，然后margin-right:-1px;或是margin-left:-1px;讓之間的邊框重疊，這樣就實(shí)現(xiàn)了四標(biāo)簽實(shí)現(xiàn)5邊框的效果了。

4.圖片與文字對(duì)齊問(wèn)題

圖片與文字默認(rèn)是居底對(duì)齊了。所以當(dāng)圖片與文字在一起的時(shí)候往往都是不對(duì)齊的。尤其圖片較小時(shí)就更加明顯了，我看到很多人使用vertical-align:middle;對(duì)齊。在火狐下效果是不錯(cuò)，但是IE下，雖然是效果好了些，但還是不夠。

如果，圖片是個(gè)20像素*20像素左右的小圖片，文字也差不多12px大，則使用vertical-align:text-bottom;是不錯(cuò)的個(gè)方法。還有個(gè)屢試不爽，兼容性不錯(cuò)的方法就是使用margin負(fù)值了。img標(biāo)簽是個(gè)很不錯(cuò)的標(biāo)簽，支持margin四個(gè)方向的正的和負(fù)的定位。一般img標(biāo)簽打頭的小圖標(biāo)與文字對(duì)齊的話，img{margin:03px-3px0;}可以說(shuō)是公式版的東西，能實(shí)現(xiàn)效果和兼容性俱佳的對(duì)齊效果。

【編輯推薦】

1. CSS中margin常見(jiàn)問(wèn)題解決方案
2. CSS margin-top屬性速查手冊(cè) 
3. CSS樣式表高效使用八大秘訣
4. 解決IE6下margin雙倍邊距問(wèn)題
5. IE6中常見(jiàn)CSS兼容性解決十大技巧