CSS中的負邊距

2015-04-22 時候寫的老文，由於但願引用因此拿了出來。

那天被一個同窗問了一個問題，三列的div，要求父div的高度和三個div的高度都和三個中字數最多，也就是高度最高的那個同樣高。試了試才發現確實有問題。在網上查到了解決方案，運用了一些很奇葩的代碼，貼上來和你們分享。點擊這裏查看demo。

以後仔細的百度了一下，發現了這麼一個叫作內外補丁負值法的東西。不過百度內外補丁負值法，出來的都是同一篇文章，感受不是一個真正的術語。仍是把這篇文章貼出來，有興趣的同窗能夠看看。

在這個解決方案中，又涉及到了傳說中的負margin。以前在阿里筆試也有一個三欄佈局的題，其中一個解決方案用的也是左右的負margin。深刻研究以後又發現了聖盃佈局、雙飛翼佈局等不少示例，確實要好好研究負邊距這個東西了。

以後參考了CSS佈局奇淫巧計之-強大的負邊距這篇文章，裏面作了實際的demo，總結成一點就是，css中盒子真正的邊界，是由margin決定的，並且margin能夠很霸氣的經過負值來壓縮實際寬度（padding不容許負值）。

有了這一點認識以後，不少問題都解決了。就好比說上邊那個demo，經過padding-bottom:10000px;建立了一個足夠高的盒子，再經過margin-bottom:-10000px;抵消這部分盒子在文檔流中的實際佔位（可是實際仍是存在的，因此就會按照第一個的高度等高），再給父級元素加上overflow:hidden，去掉多餘的高度，效果就實現了。

同時，在上邊那篇文章裏還解決了一個佈局的問題，就是多列間有margin，可是兩邊沒margin的問題（聽不懂我中文的直接點這裏看demo吧，我知道本身說的很差）。以前一直是循環到一行最後一個的時候給加上一個class，如今能夠免了，就好比我在demo裏用margin-right:10px;給li之間建立一個間隔，而後用marigin-rignt:-10px;強行加寬ul，使四個li能在一行，可是ul外content的寬度設爲width:830px;(4200px+310px;)，這樣就能夠正確的居中了。

以後簡單說下聖盃佈局和雙飛翼佈局吧，他們主要是爲了解決三欄問題。三欄問題的研究能夠看看張鑫旭老師的博客文章我熟知的三種三欄網頁自適應的佈局方法。而後以雙飛翼舉例吧，他的DOM結構是這樣的。

<div class="main">
        <div class="main-content"></div>
    </div>
    <div class="sub"></div>
    <div class="extra"></div>

把main放在最前面，而後對.sub（也就是left）使用margin-left:100%;強行移動到左邊；對.extra（也就是right）使用margin-left:(right的寬度);強行移動到右邊。因爲右邊的欄會蓋住main的內容，全部就直接給main里加上子div，經過給子div加上margin-right防止重疊保證正常顯示。如此煞費苦心的佈局目的只有一個，就是讓瀏覽器先渲染main，實現主內容先被加載的效果。聖盃佈局的話，印象中就是把.main-content的margin換成了.main的padding，目的都是同樣的。

再多說一點關於三欄佈局的東西，就是在利用浮動佈局來實現三欄的時候，應該記住，在DOM裏的順序，是左浮動的div最前，右浮動的div中間，中間的在最後，否則就會出問題。千萬不要想固然以爲中間的div在DOM的中間，而後兩邊div分別float。由於中間的div默認要佔一行，按理說右邊的會先被擠下去，再float，因此他就上不來了，實現不了咱們想要的效果。若是沒有把中間的div放到第一個位置的需求的話，仍是建議用浮動的方法作三欄佈局，簡單易用成本低。

自此也算是總結了負邊距的一些效果，有時候想一想的話，要是pading支持負值的話又會有什麼樣的奇怪方案出現呢？

== 2015-11-27更新 ==

今天見到了一個奇怪的面試題，用三個div實現一條彩虹，一樣使用了負邊距。

相關推薦：

• 那些年，奇妙的聖盃與雙飛翼，還有負邊距