CSS中負邊距是佈局中常用到的技巧，很多的佈局方法也會依賴負邊距。
再思考盒模型
css最基礎的也是最基本最重要的就是盒模型的概念
盒模型示意圖：
border和border以內部分是我們可以看到的“實體”部分，margin可以認爲是隱藏起來的“框”，這個“框”定義了“實體”在文檔流中的邊界或者說大小。（這似乎有點繞，好好理解一下）
①、在默認的情況下，這個“框”和“實體”的邊界重合，也就是“margin=0；”
②、margin值爲正，“框”向外擴展，使得“實體”在文檔流中的邊界擴大，在“實體”的周圍就會出現邊緣的空白。
③、margin值爲負，“框”向內收縮，使得“實體”在文檔流中的邊界縮小，在文檔流中佔的位置就會變小，“實體”部分就會覆蓋其他元素或者被其他元素覆蓋。
當margin-top、margin-left爲負值時，“實體”的上邊界和左邊界會向內縮，表現的效果就是元素上移、左移，有可能會覆蓋上側或者左側的其他元素文檔流中的位置也會發生相應的變化。
當margin-right、margin-bottom爲負值時，“實體”的右邊界和下邊界會向內縮，表現的效果就是元素後邊的和下邊的元素上移、左移，元素被後邊的或者下邊的元素覆蓋。
負邊距在不同場景的應用
負邊距在普通文檔流中的作用和效果
負邊距對這些由文檔流控制的元素的作用是，會使他們在文檔流中的位置發生偏移，這樣它後面文檔流中的其它元素就會“流”過來填充這部分空間。
負邊距不僅能影響元素在文檔流中的位置，還能增加元素的寬度！
前提是：該元素沒有設定width屬性，或者width屬性設爲auto。
舉個栗子
下圖綠色部分是個塊級元素，沒有設定高度，被包裹在一個寬度爲300px，水平居中的父元素中。
現在給這個元素設定一個負邊距：margin-left:-100px;
這個元素的寬度確實邊長了100px；再設定：margin-right:-100px；
寬度居然改變了！？？？這是什麼鬼。但事實就是這樣。
可以用它做什麼呢？
上圖黑框中，多個元素按順序排下來，中間帶間隔的佈局。
該怎麼實現呢？
首先就會想到浮動。把黑框內的子元素向左浮動，設一個合適margin-right值。
但是如果這樣做，在靠近黑框右邊緣的子元素就不應該有margin-right值了。如果黑框是固定寬度，可以在最右邊的元素上加一個class，然後把它的margin-right設爲0。那黑框的寬度不是固定的呢？
解決辦法： 加大子元素的父元素的寬度，讓他可以多容納一個“間隔”的寬度，然後在外面的容器設定 overflow:hidden就可以了。
增加父元素寬度就可以使用負邊距了，當然也可以使用固定寬度。
負邊距對浮動元素的影響
舉個栗子：
下圖是三個向左浮動的元素，寬高都是100px
都設定一個margin-right:-50px;
後邊的元素覆蓋到前面的元素上
再舉個栗子：
下面是是三個向左浮動的元素，寬高都是100px。虛線邊框寬度爲280px。
父元素也就是虛線框的寬度不夠了，盒子3就掉到了下邊。
給盒子3設定一個 margin-left:-20px; 時
盒子3跑到了上邊，並且覆蓋了盒子2，覆蓋的寬度是20px。
給盒子3設定 margin-left:-50px; 時
盒子3覆蓋了盒子2，覆蓋寬度是50px；
給盒子3設定margin-left:-100px; 時
盒子3完全覆蓋了盒子2的位置。
給盒子3設定margin-left:-200px; 時
盒子3完全覆蓋了盒子1的位置。
聖盃佈局和雙飛翼佈局都是這個原理。
元素寫在後面，也可以通過使用負邊距的方法讓其顯示在前面。
負邊距對絕對定位的影響
css經典的絕對定位居中的方法就是利用了負邊距
.box{
width:100px;
height:100px;
background-color:red;
position:absolute;
left:50%;
top:50%;
margin-left:-50px;/*寬度的一半*/
margin-top:-50px; /*高度的一半*/
}