margin屬性(CSS中margin屬性的介紹及用法)

CSS中margin問題及使用

margin屬性為CSS中非常常用的一個屬性,其所包含的內容也是很多的。本文主要分三部分對margin做一些分析敘述,包括其屬性,使用過程中會遇到的問題,以及一些高級應用等。對于JavaScript與margin的控制表達這里不敘述。

一、margin相關屬性

margin屬性是用于在一個聲明中設置四個外邊距的所有屬性的簡寫屬性。沒有繼承性,也就是它的設置的margin值不會自動傳遞到下一級標簽中。

margin后面的參數個數可以是一個,兩個,三個或四個。

◆一個參數,例如:margin:10px;表示四邊外邊距10像素;

◆兩個參數,例如:margin:10px5px;表示上下外邊距10像素,左右外邊距5像素;

◆三個參數,例如:margin:10px5px2px;表示上外邊距10像素,左右邊距5像素,下邊距2像素;

◆四個參數,例如:margin:10px5px2px1px;表示上外邊距10像素,右外邊距5像素,下外邊距2像素,左外邊距1像素。

這參數個數及對應含義往這兒一放,估計目光一掃而過了——沒人理會。我自己都覺得啰嗦頭大,好吧,放這東西在這兒的目的是告訴記住這對應關系的方法。

這個方法也可以用在記padding內邊距,或是cliprect剪裁上。從四個參數開始,你就想嘛:這每一天是從0點開始的,這時候時針指在最上面的,然后溜達一圈,又回到上面了,這個跟margin四個參數順序一樣的,***個,上面(每天時針是從上面開始動的),然后順時針旋轉,右,下,左。所以“margin:10px5px2px1px;表示上外邊距10像素,右外邊距5像素,下外邊距2像素,右外邊距1像素”。

三個參數,margin:10px5px2px;記住,每一天時針都是從上面開始轉的,所以***個肯定是上外邊距,時針怎么轉我們也怎么轉,于是第二個就表示右外邊距,第三個就是下外邊距,哎呀,沒有第四個參數,怎么辦。這時你要記住另外一點,這鐘啊是對稱的。所以左外布局沒有就看右外邊距啦,他們是對稱的相等的。所以呢,“margin:10px5px2px;表示上外邊距10像素,左右邊距5像素,下邊距2像素”。

兩個參數也是一樣的,首先,***個參數表示上,第二個表示右,沒有第三和第四怎么辦,找對稱!上與下對應,右與左對應,于是“margin:10px5px;表示上下外邊距10像素,左右外邊距5像素”。

對于一個參數,則是上下左右都一致,很好記的,四外邊距相同。

margin支持負值,在頁面布局中,您應該大膽的想,大膽的用,可以解決很多問題。這將會在第三部分具體討論。

二、margin常見問題

1.IE6下雙邊距問題

margin雙布局可以說是IE6下經典的bug之一。產生的條件是:block元素+浮動+margin。

還記得我自認為會CSS的那個階段,這個問題我經常碰到,會很熟練的用hack解決這個問題,當時還自以為是,洋洋得意?，F在看來,當時的自己嫩的就像個豆芽菜。真正CSS厲害的人基本上是不會碰到這個bug的,如果您時不時遇到這個bug,說明您的CSS還有好一段路要走。
我的體會是越少的浮動,就會越少的代碼,會有更靈活的頁面,會有擴展性更強的頁面。這不多說,歸結為到一定水平了,浮動會用的較少。另外,您也會避免使用浮動+margin的用法。所以,越后來越不易遇到這種bug。

這里提一下解決方法,使用hack我是不推薦的,使用hack屬于比初學者稍高一點的層次水平。一個頁面,沒有一個hack,但是各個瀏覽器下表現一致,這才是水平。使用display:inline;可以解決這個問題。

而為什么display:inline可以解決這個雙邊距bug,首先是inline元素或inline-block元素是不存在雙邊距問題的。然后,float:left等浮動屬性可以讓inline元素haslayout,會讓inline元素表現得跟inline-block元素的特性一樣,支持高寬,垂直margin和padding等,所以pclass的所有樣式可以用在這個displayinline的元素上。

如果您是IE6瀏覽器,可以狠狠地點擊這里進入demo實例頁面了解更多信息

2.margin重疊的問題

CSS2.0規范對margin重疊有如下的描述:

1.水平邊距永遠不會重合。

2.垂直邊距可能在特定的框之間重合:

◆常規流向中兩個或多個塊框相鄰的垂直邊距會重合。結果的邊距寬度是相鄰邊距寬度中較大的值。如果出現負邊距,則在***的正邊距中減去絕對值***的負邊距。如果沒有正邊距,則從零中減去絕對值***的負邊距。

◆在一個浮動框和其它框之間的垂直邊距不重合。//這句話是不夠嚴謹,在IE瀏覽器下確實如此,但是Firefox等瀏覽器下依舊重合。

◆“絕對定位的框”與“相對定位的框”邊距不重合。//這句話有待斟酌,我在Firefox等瀏覽器下測試,效果貌似很糟糕的。

margin重疊的問題其實并不是經常遇到,有時即使遇到造成的影響也很小,或是通過其他一些修改就可以輕松解決這個問題了。我也是今天才好好的研究了下margin重疊的問題,當重疊較多時,沒有找到什么好的方法解決這個問題,要不IE瀏覽器依舊頑固不化,要么Firefox表現差強人意?？梢宰约汉髞碛忠幌?既然知道會發生margin重疊,寫代碼的時候勢必會注意的,也就不會出現這些重疊的問題的,所以絞盡腦汁想一個比較***的解決方法是沒有必要的。***的解決margin重疊問題的方法就是了解它,避免它。

每枚硬幣都有正反面,其實margin重疊也是又它的用處的。當垂直方向上有多個模塊時,margin重疊正好可以讓上中下都有一個margin值,而且由于margin重疊,所以margin值的表現都是一樣的。例如a,b,c三個垂直方向上的模塊都有margin:10px0;則***的表現結果是(如果其上下沒有浮動元素干擾的話):上,中上,中下,下四處有10像素的間距。正好***定位。

關于margin重疊,我寫了個demo實例頁面,您可以狠狠地單擊這里獲取更多有用的些信息,包括些解決重疊問題的方法等。

3.margin不起作用的情況

margin不起作用多出現在Firefox瀏覽器下,最常見的原因就是浮動影響,還是就是margin重疊,或者是padding與margin的重疊。關于這個,我就指說這么多了。因為margin不起作用,可以使用padding代替,或者再添加一層標簽等方法解決,不太難,沒有多少可說的。

三、margin負值的相關應用

1.頁面上實現CSSsprite背景定位效果

關于頁面上背景定位效果,可以參見我的文章“IE6下png背景不透明問題的綜合拓展”有關頁面上定位的demo實例頁面

2.在流動性布局中的應用

流動性布局又稱自適應布局,也稱為寬度不固定布局。比如WordPress經典的兩欄式不固定布局就是使用的margin負值實現的定位,屬于左右margin負值在流動性布局中的應用,有興趣的同學可以稍微看看框架的樣式代碼,會學到些東西的。還有一類兩欄自適應需要用到margin的上下負值,尤其在一欄高度固定,另外一欄高度不定的兩欄或多欄布局中。

高度不固定欄和高度固定的欄上下錯開,均無浮動屬性,高度不固定的欄margin-top一個負值,負值的大小就是高度固定欄的高度,這樣,就實現了兩欄在同一水平線上。且寬度自適應,由于沒有浮動,所以不同擔心內部存在clear:both屬性,破快浮動。這里沒有例子,講得有點虛,您可以先把這個放一放,因為關于流動性布局(寬度自適應布局)我會好好地寫一篇文章的,到時,有關margin負值在流動性布局中的應用我會好好的講述的。

3.在選項卡等邊框線的處理

下圖顯示的是一種比較常見的選項卡樣式,舊版的迅雷首頁就是這樣子的選項卡。

如何用最簡介最易維護的CSS代碼寫出這樣的樣式效果呢?

我其實已經在圖上做了點小小的標注,使用margin-top:-1px;解決選項卡下邊框顯示的問題。
關于具體如何編寫實現此效果,建議您狠狠地單擊這里進入demo實例頁面,會有所幫助的。

類似的,如果您要用四個p實現5條1像素的左右邊框,就像表格一樣的效果,就可以使用讓每個p都有左右1像素的邊框,然后margin-right:-1px;或是margin-left:-1px;讓之間的邊框重疊,這樣就實現了四標簽實現5邊框的效果了。

4.圖片與文字對齊問題

圖片與文字默認是居底對齊了。所以當圖片與文字在一起的時候往往都是不對齊的。尤其圖片較小時就更加明顯了,我看到很多人使用vertical-align:middle;對齊。在火狐下效果是不錯,但是IE下,雖然是效果好了些,但還是不夠。

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

到此,關于“CSS中margin屬性的介紹及用法”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注本站網站,小編會繼續努力為大家帶來更多實用的文章!