解析margin負(fù)值的四大應(yīng)用
本文向大家介紹一下margin負(fù)值的相關(guān)應(yīng)用，主要從四個方面來向大家講解，相信本文介紹一定會讓你有所收獲。
margin負(fù)值的相關(guān)應(yīng)用
1.頁面上實(shí)現(xiàn)CSSsprite背景定位效果
關(guān)于頁面上背景定位效果，可以參見我的文章“IE6下png背景不透明問題的綜合拓展”有關(guān)頁面上定位的demo實(shí)例頁面
2.在流動性布局中的應(yīng)用
流動性布局又稱自適應(yīng)布局，也稱為寬度不固定布局。比如WordPress經(jīng)典的兩欄式不固定布局就是使用的margin負(fù)值實(shí)現(xiàn)的定位，屬于左右margin負(fù)值在流動性布局中的應(yīng)用，有興趣的同學(xué)可以稍微看看框架的樣式代碼，會學(xué)到些東西的。還有一類兩欄自適應(yīng)需要用到margin的上下負(fù)值，尤其在一欄高度固定，另外一欄高度不定的兩欄或多欄布局中。
高度不固定欄和高度固定的欄上下錯開，均無浮動屬性，高度不固定的欄margin-top一個負(fù)值，負(fù)值的大小就是高度固定欄的高度，這樣，就實(shí)現(xiàn)了兩欄在同一水平線上。且寬度自適應(yīng)，由于沒有浮動，所以不同擔(dān)心內(nèi)部存在clear:both屬性，破快浮動。這里沒有例子，講得有點(diǎn)虛，您可以先把這個放一放，因?yàn)殛P(guān)于流動性布局（寬度自適應(yīng)布局）我會好好地寫一篇文章的，到時，有關(guān)margin負(fù)值在流動性布局中的應(yīng)用我會好好的講述的。
3.在選項(xiàng)卡等邊框線的處理
下圖顯示的是一種比較常見的選項(xiàng)卡樣式，舊版的迅雷首頁就是這樣子的選項(xiàng)卡。
◆如何用最簡介最易維護(hù)的CSS代碼寫出這樣的樣式效果呢？
我其實(shí)已經(jīng)在圖上做了點(diǎn)小小的標(biāo)注，使用margin-top:-1px;解決選項(xiàng)卡下邊框顯示的問題。
關(guān)于具體如何編寫實(shí)現(xiàn)此效果，建議您狠狠地單擊這里進(jìn)入demo實(shí)例頁面，會有所幫助的。
類似的，如果您要用四個div實(shí)現(xiàn)5條1像素的左右邊框，就像表格一樣的效果，就可以使用讓每個div都有左右1像素的邊框，然后margin-right:-1px;或是margin-left:-1px;讓之間的邊框重疊，這樣就實(shí)現(xiàn)了四標(biāo)簽實(shí)現(xiàn)5邊框的效果了。
4.圖片與文字對齊問題
圖片與文字默認(rèn)是居底對齊了。所以當(dāng)圖片與文字在一起的時候往往都是不對齊的。尤其圖片較小時就更加明顯了，我看到很多人使用vertical-align:middle;對齊。在火狐下效果是不錯，但是IE下，雖然是效果好了些，但還是不夠。
如果，圖片是個20像素*20像素左右的小圖片，文字也差不多12px大，則使用vertical-align:text-bottom;是不錯的個方法。還有個屢試不爽，兼容性不錯的方法就是使用margin負(fù)值了。img標(biāo)簽是個很不錯的標(biāo)簽，支持margin四個方向的正的和負(fù)的定位。一般img標(biāo)簽打頭的小圖標(biāo)與文字對齊的話，img{margin:03px-3px0;}可以說是公式版的東西，能實(shí)現(xiàn)效果和兼容性俱佳的對齊效果。
【編輯推薦】
