在很多布局中我們經(jīng)常能夠見(jiàn)到類(lèi)似于margin:-10px;的用法，我們對(duì)正值的用法早已熟悉的不能再熟悉了峭判，可是這負(fù)值到底有何用呢跋选？聽(tīng)我給你吹。
負(fù)margin——普通文檔流
普通文檔流元素（不浮動(dòng)彬祖，無(wú)絕對(duì)定位，無(wú)固定定位的元素）品抽。如下圖：
代碼
圖1
負(fù)邊距會(huì)使這些文檔流中的元素發(fā)生位置偏移储笑，但不同于相對(duì)定位的偏移，相對(duì)定位的偏移會(huì)保留原來(lái)的位置圆恤，后面的元素不會(huì)去占據(jù)原有位置突倍。負(fù)邊距就恰恰相反，使用了負(fù)邊距的元素不僅會(huì)去占別人的地方，自己的地方也會(huì)被別人霸占赘方。對(duì)圖1中box2設(shè)置
margin:-10px;烧颖，效果如下：
圖2
box2左邊好像嵌入了瀏覽器邊框弱左，上面蓋住了box1窄陡，下面被box2蓋住了。這就好像負(fù)margin改變了box2在文檔流中占據(jù)的空間大小拆火，使得后面的元素流動(dòng)了上來(lái)跳夭。
還要注意的是，文檔流只能是后面的流向前面的们镜，即文檔流只能向左或向上流動(dòng)币叹，不能向下或向右移動(dòng)。
再舉一個(gè)例子:
代碼
父容器不設(shè)置高度模狭，高度由子容器撐開(kāi)颈抚，當(dāng)子容器設(shè)置上下負(fù)margin時(shí)，父容器高度減小嚼鹉。
如圖3是設(shè)置負(fù)margin前的效果：
圖3
如圖4是設(shè)置負(fù)margin后的效果：
圖4
從審查元素中可以看出設(shè)置后父元素的高度減小了10px贩汉，而且子元素內(nèi)容溢出來(lái)了。
這就說(shuō)明：在文檔流中锚赤，元素的最終邊界是由margin決定的匹舞，margin為負(fù)的時(shí)候就相當(dāng)于元素的邊界向里收，文檔流認(rèn)的只是這個(gè)邊界线脚，不會(huì)管你實(shí)際的尺寸是多少赐稽。
負(fù)margin left/right——對(duì)寬度的影響
對(duì)于沒(méi)有寬度的塊級(jí)元素，設(shè)置負(fù)margin值浑侥，會(huì)使塊級(jí)元素變寬姊舵。
舉個(gè)例子：父容器div設(shè)置寬度300px，子元素div不設(shè)置寬度寓落，默認(rèn)寬度為父容器的100%括丁，如圖5
代碼
圖5
當(dāng)為子元素設(shè)置margin-left:-100px;時(shí)，如圖6零如，可以看出子元素伸出了父元素躏将，寬度變成了400px。
圖6
負(fù)margin——浮動(dòng)元素
利用負(fù)margin值可以使因空間不夠被擠到下一行的浮動(dòng)元素重新上去考蕾。
舉個(gè)例子：父容器寬度280px祸憋，包含三個(gè)設(shè)置了左浮動(dòng)寬度都為100px的div，由于寬度不夠第三個(gè)浮動(dòng)元素只能在第二行顯示肖卧，如圖7
圖7
為第二行元素設(shè)置
margin-left:-20px;會(huì)使其重新上到第一行蚯窥，但是會(huì)遮擋一部分巧克力色的元素，如圖8所示。
圖8
負(fù)邊距對(duì)浮動(dòng)元素的影響與負(fù)邊距對(duì)文檔流中元素的影響其實(shí)是差不多的拦赠。文檔流中元素的位置由文檔流的走向決定巍沙，浮動(dòng)的元素也可以看成有一個(gè)“浮動(dòng)流”存在，不過(guò)浮動(dòng)流既可以向左荷鼠，也可以向右句携。
負(fù)margin的具體應(yīng)用
1. 圣杯布局和雙飛翼布局
代碼
這兩種布局的具體實(shí)現(xiàn)就不再贅述，但是它們都是利用了負(fù)margin對(duì)浮動(dòng)元素的影響這一特性實(shí)現(xiàn)的
圖9
2. 元素等間距排列
效果如下圖：
代碼
圖10
實(shí)現(xiàn)以上效果的步驟：
- 讓li元素都浮動(dòng)起來(lái)允乐。這樣li就會(huì)一個(gè)挨著一個(gè)排列了矮嫉。
- 為每個(gè)li設(shè)置margin-right。這樣每個(gè)li都會(huì)和右邊的li有一個(gè)間距牍疏。
- 由于父容器的寬度是固定的蠢笋，其寬度實(shí)際上是比3個(gè)li的寬度+2個(gè)margin-right的寬度，多以我們必須去掉最右邊一列的所有l(wèi)i的寬度鳞陨，才能使父容器一行剛好包裹3個(gè)li和2個(gè)空隙昨寞。我們可以給右邊一列的所有l(wèi)i用選擇器都去掉邊框，但是這種方法很麻煩厦滤，而且如果遇到各個(gè)li是動(dòng)態(tài)變化的時(shí)候援岩，就更難處理了。這時(shí)馁害，負(fù)邊距就有用了窄俏。我們只需要為ul添加一個(gè)margin-right:-20px;，就完美解決問(wèn)題碘菜。
你可能會(huì)問(wèn)負(fù)邊距怎么把li的右邊距變沒(méi)了凹蜈，其實(shí)并沒(méi)有，只是負(fù)邊距讓ul變寬了忍啸。
ul的width=3個(gè)li的寬度+3個(gè)margin-right=360px;
wrapper的width=3個(gè)li的寬度+2個(gè)marign-right的寬度=340px;
事實(shí)上ul是溢出wrapper的仰坦，溢出部分就是我們不需要的右邊那列的右邊距，我們只需要給wrapper加一個(gè)overflow：hidden就可以啦计雌。
3. 負(fù)邊距+絕對(duì)定位悄晃，實(shí)現(xiàn)水平垂直居中
代碼
效果如下圖：
圖11
