css中的負邊距(negative margin)是布局中的一個常用技巧，只要運用得合理常常會有意想不到的效果。很多特殊的css布局方法都依賴于負邊距，所以掌握它的用法對于前端的同學來說，那是必須的。

負邊距在普通文檔流中的作用和效果

那些沒有脫離文檔流的元素（指不是浮動元素也不是絕對定位、固定定位的元素等），其在頁面中的位置是跟隨者文檔流的變化而變化的。看下面這幅圖：

負邊距對這些由文檔流控制的元素的作用是，會使它們在文檔流中的位置發生偏移，但這種偏移不同于相對定位，通過相對定位偏移后，其仍然會堅守著它原來占據的空間，不會讓文檔流的其它元素乘虛而入。而通過負邊距進行偏移的元素，它會放棄偏移前占據的空間，這樣它后面文檔流中的其它元素就會“流”過來填充這部分空間。還是通過例子來說明吧。現在我們把上圖中的塊狀元素、行內元素以及inline-block元素都設一個負邊距 margin:-10px; 看看會發生什么：

我們看到，黑灰色的塊狀元素好像向左和向上都分別嵌入了瀏覽器窗口的邊界里10px,然后塊狀元素下面的文字也爬到了它身上，行內元素向左移動蓋住了它前面的一個字，它后面的文字也有一部分覆蓋在了它身上，inline-block的位置變化也很明顯。

好了，這點相信大家早就心知肚明了，就是負的邊距好像能減小元素在文檔流中的尺寸一樣，但事實上，它的尺寸大小并沒變，只是文檔流在計算元素位置的時候，會認為負邊距把元素的尺寸減小了，因為位置也就發生變化了。這只是打個很形象的比喻，幫助大家理解一下。還要注意的是，文檔流只能是后面的流向前面的，即文檔流只能向左或向上流動，不能向下或向右移動。

所以，一切只要是由文檔流決定的東西，負邊距就能起作用了。

比如，一個沒有設定高度的塊狀元素，其高度是自動的，具體來說就是由它里面的文檔流最后的位置決定的。假設它里面有一個出于文檔流中的子元素，高度為100px;那這時這個父元素的高度就等于子元素的高度100px了，如果子元素繼續增高，那么父元素也會跟著增高。可是如果這時子元素設一個負的margin-bottom,比如-20px，因為負邊距會影響到文檔流，本來文檔流的高度是從父元素的最頂端到子元素的最底端這段高度，現在子元素有一個margin-bottom:-20px;就相當于文檔流要向上退后20px,這樣整個文檔流的高度就減少了20px了，那么父元素的高度也會跟著減少20px。在IE8+以及那些標準瀏覽器中，這還需要父元素擁有一個overflow:hidden的屬性，因為父元素的高度變了，但子元素的高度并沒有變，所以需要使子元素超出隱藏，但即使不設置overflow:hidden，父元素的高度也是變小了的，只不過這時子元素的高度會超出父元素。在IE6中則不需要，但需要觸發它的hasLayout屬性。所以以前所說的多列等高布局就是利用這個原理來實現的。

總之一句話，在文檔流中，元素的最終邊界是由margin決定的，margin為負的時候就相當于元素的邊界向里收，文檔流認的只是這個邊界，不會管你實際的尺寸是多少。

左和右的負邊距對元素寬度的影響

負邊距不僅能影響元素在文檔流中的位置，還能增加元素的寬度！

這個作用能實現的前提是：該元素沒有設定width屬性（當然width:auto是可以的）。

比如下圖的黑灰色部分是一個塊狀元素，它沒有設定寬度。它被包裹在一個寬度為400px,且水平居中的父元素中。

現在給這個元素的設一個margin-right:-100px;

我們看到它的寬度的確變長100px;然后再給它設一個margin-left:-100px;

我們看到它變得更寬了。

負的margin會改變元素的寬度，這的確很讓人費解，如果說負邊距會改變元素在文檔流中的位置還是很好理解的話，那改變寬度這種現象還真的蠻讓人不可思議的。

那這貨有什么用途呢？我就舉一個例子吧。

想要創建上圖中黑框內的幾個元素按順序排下來，中間帶些間隔的布局要怎么做？，當然最簡單省事的方法就是利用浮動了。我們把黑框里面的子元素向左浮動，然后設一個合適的margin-right,是不是就辦到了呢？但因為外邊黑框的寬度是固定的，就是里面四個子元素的寬度加上三列間隔的寬度，所以靠近右邊邊界的子元素就不應該有正向的margin-right了，否則這一行就只能容納三個子元素了。有人說那這還不簡單，給靠近右邊界的那些子元素加一個class，把它的margin-right設為0不就行了。這當然可以，但如果這些子元素是在模板中通過循環動態輸出的，那在循環的時候還得判斷哪些子元素是靠近右邊邊界的，如果是就加上一個class。這樣做的話是不是就有點麻煩了？所以解決辦法是加大子元素的父容器的寬度，讓它能夠容納一行中有四個子元素加上四列間隔的寬度，然后最外面的的黑框的那個容器設一個overflow:hidden就行了。上面說了負的左右邊距能加大元素的寬度，所以給子元素的父容器設一個合適的負的margin-right就可以了。當然你也可以直接在css中把子元素的父容器的寬度設寬一些，舉這個例子只是為了說明負邊距也是一種方法。看下完整的代碼：

負邊距對浮動元素的影響

負邊距對浮動元素的影響與負邊距對文檔流中元素的影響其實是差不多的。文檔流中元素的位置由文檔流的走向決定，浮動的元素也可以看成有一個“浮動流”存在，不過浮動流既可以向左，也可以向右。

比如下圖是三個向左浮動的元素，寬高都是100px：

現在把它們都設一個margin-right:-50px; 然后會變成這樣子：

我們看到后面的元素疊到了前面的元素上。

再看下面的圖：

我們把瀏覽器縮小了，然后因為寬度不夠，元素3掉下來了。我們給元素3設一個margin-left:-80px;看看會怎么樣

這時我們看到元素3上去了，而且還覆蓋了元素2的一部分。繼續元素3設為margin-left:-100px

這時元素3完全覆蓋住了元素2,當元素3設為：margin-left:-200px時：

我們看到元素3繼續向左移動并覆蓋住了元素1。

現在想必大家都明白了負邊距對浮動元素位置的影響了吧。所以那些說得很好聽的什么圣杯布局、雙飛翼布局啊什么的，都是利用這個原理實現的。就是某個元素雖然是寫在了后面，但可以通過負邊距讓它在瀏覽器顯示的時候是在前面的。這個以后可以再慢慢講。

負邊距對絕對定位元素的影響

絕對定位的元素定義的top、right、bottom、left等值是元素自身的邊界到最近的已定位的祖先元素的距離，這個元素自身的邊界指的就是margin定義的邊界，所以，如果margin為正的時候，那它的邊界是向外擴的，如果margin為負的時候，則它的邊界是向里收的。利用這點，就有了經典的利用絕對定位來居中的方法：

看下效果：

但該方法的缺點是必須要知道要居中元素的高度和寬度。

實例：

稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時必問的問題，因為它既能體現你懂HTML結構又能體現出你對ＤIV+CSS布局的掌握，畢竟我們學習CSS主要就是為了更好地布局帶來最好的用戶體驗嘛~

事實上，圣杯布局其實和雙飛翼布局是一回事。它們實現的都是三欄布局，兩邊的盒子寬度固定，中間盒子自適應，也就是我們常說的固比固布局。它們實現的效果是一樣的，差別在于其實現的思想。

圣杯布局的出現是來自于a list part上的一篇文章In Search of the Holy Grail。比起雙飛翼布局，它的起源不是源于對頁面的形象表達。在西方，圣杯是表達“渴求之物”的意思。而雙飛翼布局則是源于淘寶的UED，可以說是靈感來自于頁面渲染。一起來看看淘寶的頭部實現：

雙飛翼布局

通過縮放頁面就可以發現，隨著頁面的寬度的變化，這三欄布局是中間盒子優先渲染，兩邊的盒子框子固定不變，即使頁面寬度變小，也不影響我們的瀏覽。注意：當你縮放頁面的時候，寬度不能小于700PX，為了安全起見，最好還是給body加一個最小寬度!

如果你有了那么一點理解以后，我們來看看圣杯布局的實現：

第一步：給出HTML結構：

寫結構的時候要注意，父元素的的三欄務必先寫中間盒子。因為中間盒子是要被優先渲染嘛~并且設置其自適應，也就是width:100%。

第二步：給出每個盒子的樣式

header{width: 100%;height: 40px;background-color: darkseagreen;}

.container{ height:200px;overflow:hidden;}

.middle{width: 100%;height: 200px; background-color: deeppink;float:left;}

.left{? ? width: 200px;height: 200px;background-color: blue;float:left;}

.right{width: 200px;height: 200px;background-color: darkorchid;float:left;}

footer{width: 100%; height: 30px;background-color: darkslategray;}

第三步：看此時的效果圖

中間的三欄并沒有在一行內顯示

大家可以看到，三欄并沒有在父元素的一行顯示，就是因為中間盒子我們給了百分之百的寬度。所有左右兩個盒子才會被擠下來。

那么如何讓它們呈現出一行三列的效果呢？那就要讓左邊的盒子要到中間盒子的最左邊，右邊的盒子到中間盒子的最右邊。換個想法，如果中間盒子不是100%的寬度，那么按照文檔流，左邊的盒子一定會在中間盒子的后面顯示，接著顯示右邊的盒子。但是現在中間盒子是滿屏了的，所以左右兩個盒子被擠到下一行顯示。我們要做到的是讓左右兩個盒子都上去。此時，CSS的負邊距(negative margin)該上陣了。

第四步：利用負邊距布局

1.讓左邊的盒子上去

需要設置其左邊距為負的中間盒子的寬度，也就是.left {margin-left:-100%;}。這樣左盒子才可以往最左邊移動。左邊產生負的margin，所以向左移動100%的距離

2.讓右邊的盒子上去

需要設置其左邊距為負的自己的寬度，也就是.right {margin-left：-200px;}。這樣右盒子才可以在一行的最右邊顯示出自己。

第五步：看此時的效果圖

實現固比固布局

到這里，是不是感覺很有成就感？但是很遺憾的告訴你，還沒結束哦！

我們現在的確是硬性的實現了固比固布局。但是要記住，中間盒子是自適應的寬度，所以中間盒子里的內容會被左右盒子給壓住一部分。

比如現在我給中間盒子加很多的內容，大家看看效果圖：

中間盒子的內容被蓋住

所以，我們的工作還沒停止。

第六步：讓中間自適應的盒子安全顯示

首先:利用父級元素設置左右內邊距的值，把父級的三個子盒子往中間擠。

代碼如下：.container{ padding: 0? 200px;}這里的200px是左右盒子的寬度。

效果如下：

利用父級的內邊距將盒子往中間擠

我們可以看到，左右兩邊的內邊距是有了，但是中間盒子上的內容還是被壓著。

其次:給左右兩個盒子加一個定位，加了定位之后左右兩個盒子就可以設置left和right值。

代碼如下：

.left{ position: relative; left: -200px;}

.right{position: relative;right: -210px;

第七步：看最終效果圖

圣杯布局大功告成啦！

現在，圣杯布局終于搞定了，也實現了我們要的效果，左右側的盒子固定，中間盒子自適應，而且中間盒子的內容完全不受影響。你是不是也懂了呢?