margin負值的應用

CSS盒模型中,margin是我們老熟悉的一個屬性了, 它的負值你用過嗎? 你知道margin負值的秘密武器嗎?我們一起看看吧!

帶豎線分隔的橫向列表

橫向列表.jpg 傳統的分隔符是使用 “|” 來實現的,弊端顯而易見,不利于表現與結構的分離,同時增加了后臺輸出時的判斷工作。所以我們采用border-left 左邊框來模擬分割線,然后通過margin-left:-1px隱藏掉第一個列表項的邊框,父元素設置 overflow:hidden 來隱藏溢出部分,這樣完美達到首尾無分割線的要求。

2012-5-4 更新

實際測試中發現 iphone safari 設置margin負值=border-widht 并不能很好的隱藏,還有約0.5px的細線,iPad沒測不知道如何?修復方法如下: /* ?修復iphone safari 不能完全隱藏邊框的bug ?*/ @media ?screen and (max-device-width: 480px){ .nav-list-item { margin-left:-2px; } .ui-tab-trigger-item { margin-bottom:-2px; } } iphone-safari-bug.jpg  

帶底部分割線的豎向列表

縱向列表.jpg 縱向列表.jpg 原理同橫向列表相同,需要注意的是 margin 負值在 IE 中的層級bug,詳細參見:IE6 IE7 IE8(Q) 負邊距 (margin) 導致元素溢出 hasLayout 容器時顯示異常,得到的最終解決方案是用 zoom:1確保觸發hasLayout,然后設置position:relative。

兩欄、三欄自適應布局

自適應布局.jpg 自適應布局.jpg曾經有這樣一個經典的需求: 1)兩欄抑或三欄布局,主體自適應寬度; 2)一個或兩個側邊欄固定寬度; 3)主體部分xhtml結構在最前面(網速慢時可以優先顯示,對SEO有利) 4)自適應高度,且不影響等高; 5)兼容IE6+,firefox,chrome,opera。 于是乎margin負值便大放光彩,首先是國外出現的圣杯布局,掀起一股margin負值熱潮。緊接著在柵格化布局大行其道的淘寶,玉伯大濕進一步 利用margin負值,創造了同一種xhtml結構,兩欄或三欄位置通過css任意調整的布局,玉伯美其名曰:雙飛翼布局--比翼雙飛,像鳥兒翱翔藍天一 樣自由。(雙飛翼布局完整demo) 至此,margin負值在布局之路上配合float妹子,已經發揮得淋漓盡致。 優雅的demo

多欄等高

多欄等高.jpg 多欄等高.jpg正 如上面所說,有時候我們還希望多欄等高,使頁面看起來更美。于是便有了經典的 padding-bottom:9999px;margin-bottom:-9999px;先通過padding把盒子擴展到足夠高,然后通過 margin偽娘把它給拉回來,最后父元素設置overflow:hidden隱藏溢出,這樣多欄布局中就會以最高欄為其他欄的視覺高度。 當然萬物沒有完美的,這種等高方法的弊端如下: 1)當高度超過9999px時候失效,當然一般高度不會超過這個,也可以設置為最大值 32767px(為啥,因為int的最大值就是32767,超過這個數值會以最大值計算) 2)無法設置底部邊框 其他的就不多說了,以后會專門寫一篇多欄等高的文章,詳細介紹各種方法的利弊,大家按需使用。

產品列表

多欄等高.jpg 有時候會要求一行產品列表左右兩邊是沒有空隙的,中間有一定的間距;比如我們設置了li { margin-right:20px;} 那么最后一個肯定也是有20px的間距的,怎么辦?我們可以通過設置父元素(比如ul)margin-right:-20px; 來擴展容器的寬度,然后把整體的寬度加在最外層的元素上,此處如果把寬度加在了父元素上(比如ul)會導致此方法失效,因為寬度定死了,margin負值便無法擴展容器的寬度了。

已知高寬元素水平垂直居中

居中.jpg 對于水平居中當然我們有更好的方法,塊級元素設置 margin-left:auto; margin-right:auto; 行內元素可以使用 text-align:center 。垂直居中就不多說了,深入研究又是一篇文章了!

模擬表格線

表格線.jpg 上面的布局通過表格當然很好實現,但是前幾天 點點 老兄說這個結構要用 ul無序列表來寫,第一時間便想到了用 inline-block 和margin負值來做了。實際中問題還是挺多的,遇到了IE寬度奇偶BUG。國外大神的解決方法是 body{margin-left:1px; },但是發現治標不治本,IE6和7還是坑爹。于是想到了把li的寬度設置為小數 width:49.99%; 雖然IE6-7右邊框還是有一點點錯位,但是視覺上基本可以了,無需刻意追求1px的差異。 然后 點點 老兄又說了:如果用CSS3 如何寫呢?那么自然想到了?columns 屬性,研究發現這爺們居然也有IE的奇偶癖好了,兩列的時候,li 如果是奇數除了chrome,其他現代瀏覽器都越好似的,一起錯位了。 這個問題我們下回分解,margin負值能很好的解決這樣的需求了,兼容性也不錯。

tab選項卡

最后說說demo中的整體結構選項卡中同樣用到了 margin 負值,選中狀態下,我們需要隱藏掉底部邊框。 在選項卡中,遇到了 firefox box-shadow 導致 outline 擴展的bug,解決方案見demo。