css中負邊距(nagative margin)是布局中常常使用的乙個技巧。僅僅要運用得當時常會產生奇異的效果。勘稱css中的奇淫巧計，非常多css布局方法都依賴於負邊距，掌握它對於前端童鞋來說還是非常重要的。
文件流
(自己的理解是從頭到尾依照文件的順序。該在什麼位置就在什麼位置，也能夠依照上面的意思理解。自上而下。自左到右的順序)
那些沒有脫離文件流的元素（指不是浮動元素也不是絕對定位、固定定位的元素等），其在頁面中的位置是尾隨者文件流的變化而變化的。看以下這幅圖：
負邊距對這些由文件流控制的元素的作用是，會使它們在文件流中的位置發生偏移，但這樣的偏移不同於相對定位，通過相對定位偏移後。其仍然會堅守著它原來占領的空間。不會讓文件流的其他元素乘虛而入。而通過負邊距進行偏移的元素，它會放棄偏移前占領的空間，這樣它後面文件流中的其他元素就會「流」過來填充這部分空間。
還是通過樣例來說明吧。
如今我們把上圖中的塊狀元素、行內元素以及inline-block元素都設乙個負邊距 margin:-10px; 看看會發生什麼：
具體發生了什麼變化自己體會體會，負的邊距好像能減小元素在文件流中的尺寸一樣。但其實，它的尺寸大小並沒變，僅僅是文件流在計算元素位置的時候，會覺得負邊距把元素的尺寸減小了，因此位置也就發生變化了。
所以，一切僅僅要是由文件流決定的東西。負邊距就能起作用了。
總之中的乙個句話，在文件流中，元素的終於邊界是由margin決定的。margin為負的時候就相當於元素的邊界向裡收，文件流認的僅僅是這個邊界，不會管你實際的尺寸是多少。
負邊距對元素寬度的影響
負邊距不僅能影響元素在文件流中的位置。還能新增元素的寬度！
這個作用能實現的前提是：該元素沒有設定width屬性（當然width:auto是能夠的）。
比方下圖的綠色部分是乙個塊狀元素，它沒有設定寬度。它被包裹在乙個寬度為400px，且水平居中的父元素中。
如今給這個元素的設乙個margin-right:-100px;
我們看到它的寬度的確變長100px;然後再給它設乙個margin-left:-100px;
我們看到它變得更寬了。
怎麼理解呢？子塊狀元素的寬度設定為width:auto;或者不設定（預設width:auto;）的時候，是會依據其margin邊界來填充父元素的，若正常設定為margin:100px;那麼子元素的寬度必定減小200px；反之若設定margin:-100px;那麼其為了正常填充整個父元素其寬度須要新增200px。
1、左右列固定，中間列自適應布局
此例適用於左右欄寬度固定，中間欄寬度自適應的布局。
因為網頁的主體部分一般在中間。非常多網頁都須要中間列優先載入。而這樣的布局剛好滿足此需求。
css：
body
.container
.main
.left,.right
.left
.right
class="container">
class="main">
main
div>
div>
class="left">
left
div>
class="right">
right
div>
效果：
2、去掉列表右邊框
專案中常常會使用浮動列表展示資訊，為了美觀通常為每乙個列表之間設定一定的間距（margin-right）,當父元素的寬度固定式。每一行的最右端的li元素的右邊距就多餘了，去除的方法一般是為最右端的li加入class，設定margin-right:0; 這樣的方法須要動態推斷為哪些li元素加入class，麻煩！
。！利用負margin就能夠實現以下這樣的效果：
css：
*
ul,li
.test
.test
ul .test
ulli
.clearfix
:after
class="test clearfix">
子元素1li>
子元素2li>
子元素3li>
子元素4li>
子元素5li>
子元素6li>
ul>
div>效果：
3、負邊距配合絕對定位水平垂直居中
這個前提條件是已知子元素的寬高。
4、多列等高
此例關鍵是給每乙個框設定大的底部內邊距，然後用數值類似的負外邊距消除這個高度。
這會導致每一列溢位容器元素，假設把外包容器的overflow屬性設為hidden。列就在最高點被裁切。
css：
*
.container
.left,.mid,.right
.left
.mid
.right
p
html：
class="container">
class="left">
style="height:50px">height:50pxp>
div>
class="mid">
style="height:100px">height:100pxp>
div>
class="right">
style="height:200px">height:200pxp>
div>
div>效果：
5、去除列表最後乙個li元素的border-bottom
列表中我們常常會加入border-bottom值，最後乙個li的border-bottom往往會與外邊框重合，視覺上**觀，往往要移除。
css：
*ul,li
.container
ulli
html：
class="container">
testli>
testli>
testli>
testli>
testli>
ul>
div>效果：
注意：當中具有邊框的父元素假設不加overflow:hidden;會導致出現邊框與子元素li標籤的邊框重疊的情況，例如以下：
我相信這個微小的瑕疵會逼死無數像我這樣的強迫症患者..
具體資源能夠參考：the definitive guide to using negative margins
有什麼好的問題或者資源歡迎補充
負值之美 負margin在頁面布局中的應用
負數給人總是一種消極 否定 拒絕之感，不過有時利用負margin可以達到奇妙的效果，今天就表一表負值在頁面布局中的應用。這裡說的負值主要指的是負margin。關於負margin的原理建議大家看看這篇文章 本文不講原理，主要展示幾個應用。此例適用於左右欄寬度固定，中間欄寬度自適應的布局。由於網頁的主體...
CSS知識梳理之 margin
梳理完position，來到margin，每個知識點乙個乙個攻破啦 雖然margin可以應用到所有元素，但display屬性不同時，表現也不同 1.block元素可以使用四個方向的margin值 2.inline元素使用上下方向的margin值無效 3.inline block使用上下方向的marg...
CSS之margin樣式屬性
相對於同級的標籤設定偏移量 doctype html utf 8 title span in style head border 1px solid red height 300px width 300px margin bottom 20px in style background color b...