1.引言
開篇前需聲明一點：本人前端的菜鳥一枚，也是在自學的過程中碰到了負邊距（Negative Margin）布局問題，是以花了近一天的時間去找資料寫Demo測試，文章是我綜合其他大牛的思路而成，目的并不在于向諸位“傳道”，而主要是為了友善自己以後查閱複習，當然如果能夠幫到你那就更好了。文中若有錯誤，歡迎指正，不必留情。
2.負外邊距的表現
有人說div+css布局方式主要有三種：
- 浮動（float:left;float:right）
- 定位（絕對定位：absolute；相對定位：relative）
- 負邊距（margin:-100px）;
這種說法我也不知道對不對（畢竟是菜鳥），但是可以肯定的是既然有這種說法，足見負外邊距對于布局的影響還是挺大的，或者在某些特定的布局中需要依仗它。下面将從兩個方面通過代碼示例來說明負外邊距的表現：
2.1 對于靜态元素的影響
這裡所謂的靜态元素指的的沒有脫離文檔流的元素，它在頁面位置是跟随文檔流變化而變化的。不妨看看下面這個示例：
<div class="container">
<div class="top"></div>
<span class="behind">君不見，黃河之水天上來，奔流到海不複回。君不見，高堂明鏡悲白發，朝如青絲暮成雪。人生得意須盡歡，莫使金樽空對月。天生我材必有用，千金散盡還複來。烹羊宰牛且為樂，會須一飲三百杯。<span class="inner">岑夫子，丹丘生，将進酒，杯莫停。</span>與君歌一曲，請君為我傾耳聽。鐘鼓馔玉不足貴，但願長醉不複醒。古來聖賢皆寂寞，惟有飲者留其名。陳王昔時宴平樂，鬥酒十千恣歡谑。主人何為言少錢，徑須沽取對君酌。五花馬，千金裘，呼兒将出換美酒，與爾同銷萬古愁。</span>
</div>
<style type="text/css">
body,div,p{
margin: ;
padding: ;
}
.container{
width: px;
height: px;
margin: px auto;
font-size: px;
border: px solid #0094ff;
}
.top{
width: px;
height: px;
background-color: yellowgreen;
/*
margin-top: -50px;
margin-left: -50px;
margin-right: -50px;
margin-bottom: -50px;
*/
}
/*
.inner{
display: inline-block;
width: 100px;
height: 100px;
background-color: royalblue;
color: white;
margin-right: -50px;
margin-bottom: -50px;
}
*/
</style>
如果給上面的黃綠色div塊（.top）分别加上負外邊距看看有什麼效果：
(1)margin-top: -50px; 很顯然div塊往上挪動了50px，後面的span标簽裡面的文字流也跟着往上挪動50px。
(2)margin-left: -50px;div塊往左邊挪動了50px，後面的span标簽内容與位置沒有發生變化
(3)margin-right: -50px;直接加似乎看不出效果，如果把上面的div塊改成display: inline-block;就可以看出效果，div的位置和大小都沒有發生變化，但是後面的“文字流”頂上去了。
(4)margin-bottom: -50px;“文字流”整體上挪，但是div塊的大小和位置依然沒變
說明：上面4種負邊距的設定，個人認為margin-top和margin-left負邊距好了解，就是把元素向上和向左移動，但是margin-right和margin-bottom負邊距并不是把元素向右和向下移動，因為文檔流隻能向上或者向左流動。我對于margin-right和margin-bottom負邊距的了解就是它會把元素的文檔流邊界向左或者向上挪動，而元素的位置和大小不變（見下圖），這也解釋了為什麼margin-right: -50px和margin-bottom: -50px；的文檔流都向左和向上流動進而壓蓋住了原有的div塊。
此外，對于沒有設定寬度（width：auto也可以）的元素，margin-left和margin-righ的負邊距會增加元素的寬度。
<div class="container">
<div class="content"></div>
</div>
.container{
width: px;
height: px;
margin: px auto;
border: px solid salmon;
}
.content{
height: px;
background-color: seagreen;
margin-left: -px;
margin-right: -px;
}
2.2 對于浮動元素的影響
實際上負邊距對于浮動元素的影響和靜态元素是類似的，可以想象浮動的元素也會有一個“浮動流”，類似文檔流，四個方向的負邊距的影響和靜态元素是一樣的，看下面的示例：
<div class="container">
<div class="div-one">div1</div>
<div class="div-two">div2</div>
<div class="div-three">div3</div>
</div>
.div-one,.div-two,.div-three{
width: px;
height: px;
float: left;
color: white;
font-size: px;
}
.container{
width: px;
height: px;
margin: px auto;
border: px solid salmon;
}
.div-one{
background-color: seagreen;
margin-left: -px;
margin-top: -px;
}
.div-two{
background-color: slateblue;
margin-right: -px;
}
.div-three{
background-color:saddlebrown;
}
div1塊向上和向左挪動，後面的“浮動流”跟上，而div2的浮動流邊界向左收縮，所有div3不管div2的實際大小，直接壓蓋上來。
說到負邊距浮動布局，這裡有小小的Demo：
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
父元素的寬度和每個li的寬度是固定的，正常操作全部浮動，通過計算給定每個li一個margin-right值，第3,6,9個元素會被相應的“擠下來”，這裡或者js代碼計算一下，選出3,6,9元素去掉margin-right值，就可以達到效果。實際上呢，完全可以通過負邊距來給li的無寬父元素增加一個margin-right負邊距使得3,6,9“正位”，然後把超出的部分隐藏。
ul,li{
list-style: none;
}
.container{
height: px;
width: px;
margin: px auto;
border: px solid #0094ff;
}
ul{
height: px;
overflow: hidden;
margin-right: -px;
/*對于無寬的父元素margin-right:-10px會使得父元素向右伸展10px，進而有足夠的空間容納3,6,9元素*/
}
li{
height: px;
width: px;
background-color:salmon;
color: white;
font-size: px;
margin: px px ;
float: left;
}
3.總結
語言表達能力和水準有限，啰嗦了半天也總覺得沒有說清楚。不過我覺的這個需要自己寫幾個Demo去體會一下，尤其是對margin-right和margin-bottom負邊距的了解，這個很重要。後續的篇章中會基于本篇中的理論來展開，主要是使用負邊距的一些布局，其中包括著名的“聖杯布局”和“雙飛翼布局”，未完待續哦！
4.參考文章
- css布局奇淫巧計之強大的負邊距
- css負邊距詳解