margin負值的應用

CSS盒模型中，margin是咱們老熟悉的一個屬性了， 它的負值你用過嗎？ 你知道margin負值的祕密武器嗎？咱們一塊兒看看吧！

帶豎線分隔的橫向列表

傳統的分隔符是使用 「|」 來實現的，弊端顯而易見，不利於表現與結構的分離，同時增長了後臺輸出時的判斷工做。因此咱們採用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; }

}

 

帶底部分割線的豎向列表

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

兩欄、三欄自適應佈局

曾經有這樣一個經典的需求：

1）兩欄抑或三欄佈局，主體自適應寬度；

2）一個或兩個側邊欄固定寬度；

3）主體部分xhtml結構在最前面（網速慢時能夠優先顯示，對SEO有利）

4）自適應高度，且不影響等高；

5）兼容IE6+，firefox，chrome，opera。

因而乎margin負值便大放光彩，首先是國外出現的聖盃佈局，掀起一股margin負值熱潮。緊接着在柵格化佈局大行其道的淘寶，玉伯大溼進一步 利用margin負值，創造了同一種xhtml結構，兩欄或三欄位置經過css任意調整的佈局，玉伯美其名曰：雙飛翼佈局--比翼雙飛，像鳥兒翱翔藍天一 樣自由。(雙飛翼佈局完整demo) 至此，margin負值在佈局之路上配合float妹子，已經發揮得淋漓盡致。

優雅的demo

多欄等高

正 如上面所說，有時候咱們還但願多欄等高，使頁面看起來更美。因而便有了經典的 padding-bottom：9999px；margin-bottom：-9999px；先經過padding把盒子擴展到足夠高，而後經過 margin僞娘把它給拉回來，最後父元素設置overflow：hidden隱藏溢出，這樣多欄佈局中就會以最高欄爲其餘欄的視覺高度。

固然萬物沒有完美的，這種等高方法的弊端以下：

1）當高度超過9999px時候失效，固然通常高度不會超過這個，也能夠設置爲最大值 32767px（爲啥，由於int的最大值就是32767，超過這個數值會以最大值計算）

2）沒法設置底部邊框

其餘的就很少說了，之後會專門寫一篇多欄等高的文章，詳細介紹各類方法的利弊，你們按需使用。

產品列表

有時候會要求一行產品列表左右兩邊是沒有空隙的，中間有必定的間距；好比咱們設置了li { margin-right：20px;} 那麼最後一個確定也是有20px的間距的，怎麼辦？咱們能夠經過設置父元素（好比ul）margin-right：-20px； 來擴展容器的寬度，而後把總體的寬度加在最外層的元素上，此處若是把寬度加在了父元素上（好比ul）會致使此方法失效，由於寬度定死了，margin負值便沒法擴展容器的寬度了。

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

對於水平居中固然咱們有更好的方法，塊級元素設置 margin-left:auto; margin-right:auto; 行內元素可使用 text-align：center 。垂直居中就很少說了，深刻研究又是一篇文章了！

模擬表格線

上面的佈局經過表格固然很好實現，可是前幾天 點點 老兄說這個結構要用 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。