以下內容均為個人整理的觀點，一個個字碼出來的嘉汰，不喜勿噴
負margin的理論上一篇大概說了一下，那么到底該怎么使用呢钞诡？
根據日常開發(fā)和網上整理郑现，大概整理了以下幾個常用案例
1.水平垂直居中
水平垂直居中
思路：
- 外層父級為outer，內部元素為box
- 因為不知道父級元素的寬高荧降，所以我們需要考慮怎么控制box塊
首先讓box相對于outer定位接箫，當然left和top都是50%。（效果如圖）
絕對定位后的位置- 然后就要考慮讓元素向左移動自身的一半（box寬100高100）朵诫，向上移動自身的一半辛友。此時再使用定位屬性的left和top明顯是不現實的。
所以怎樣讓box向左移動和向上移動呢剪返？還記得上一篇說負margin的圖嗎废累？
各方向的負margin情況- 所以此時直接設置box，margin-top和margin-left都為-50px脱盲，就可以解決問題（當然css3的transform也可以邑滨，這里直說負margin）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ width: 400px;height: 300px;background-color: >#ccc;position: relative; } .outer .box{ width: 100px;height: 100px;background-color: coral; position: absolute;left:50%;top: 50%; margin-left: -50px;margin-top:-50px; } </style> </head> <body> <div class="outer"> <div class="box"></div> </div> </body> </html>
2.去除列表的右邊距
如圖，這樣的布局钱反，我們對圖片列表每一個元素都設置右邊的margin掖看，這樣就不用單獨給最右邊元素單獨設置類名（當然，這樣很明顯很麻煩）面哥。但是最右邊一列的元素的右margin是多余的哎壳。
看最后一列多余的右margin
假設列表每一個元素寬200px，間隙20px尚卫，但是外層水平居中的包裹元素只有640px的寬怎么辦归榕？硬要是塞進去，那么肯定一行放不下3個（每一元素占用寬度200+20吱涉，三個就是660px）刹泄。就會出現以下結果：
被擠下去了- 所以我們在多嵌套一層結構，結構如下：
<div class="outer"> <ul class="box"> <li><img src="./01.jpg" alt=""></li> <li><img src="./01.jpg" alt=""></li> <li><img src="./01.jpg" alt=""></li> <li><img src="./01.jpg" alt=""></li> <li><img src="./01.jpg" alt=""></li> <li><img src="./01.jpg" alt=""></li> <li><img src="./01.jpg" alt=""></li> <li><img src="./01.jpg" alt=""></li> <li><img src="./01.jpg" alt=""></li> </ul> </div>outer父級已經設置好了640px的寬度怎爵，但是如果想要達到一排放3個列表元素循签，那么box必須660px，這時候怎么辦呢?(這里只講授負margin的方法)
- box不設置寬度疙咸，是不是和outer一樣寬县匠，都是640px，當我們給box設置margin-right：-20px，這個時候box依然會和outer一樣寬乞旦，那么box真實內容區(qū)域是不是已經到了660px呢贼穆？這樣是不是就放下3列了嗎？
- 但是outer仍然是640px兰粉，所以outer設置margin：0 auto后故痊，仍然能保持真正的居中。css代碼如下：
*{margin:0;padding:0;list-style: none;} .outer{ width:640px; margin: 0 auto; } .box{ overflow: hidden;/*清浮動*/ margin-right: -20px; } .box li{ float: left;width: 200px; margin-right: 20px; }
3.去除多余的邊框線
看下圖有沒有別扭的地方
image.png
很明顯為了方便書寫玖姑，每一個列表都設置了下邊框（紅色）愕秫，但是最后一個下邊框多余了。
你有想到怎么寫嗎?思考一下我們margin各個方向負值得那個圖焰络？
嚕啦啦- 我們如果給里邊的列表元素寫一個margin-bottom：-1px戴甩，那么列表元素的下邊框是不是就被后邊的元素覆蓋住了？
- 但是除了最后一個列表元素闪彼，其他元素雖然有1像素的覆蓋甜孤，但是不影響顯示，而最后一個列表元素會被父級的下邊框覆蓋（要給父元素設置overflow：hidden 超出隱藏）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;padding: 0;list-style: none;} .box{ border: 1px solid #000000;width: 300px;text-align: center;overflow: hidden; } .box li{ border-bottom: 1px solid red;margin-bottom: -1px; } </style> </head> <body> <ul class="box"> <li>今天的北京天氣真好畏腕，就是不暖和</li> <li>今天的北京天氣真好缴川，就是不暖和</li> <li>今天的北京天氣真好，就是不暖和</li> <li>今天的北京天氣真好描馅，就是不暖和</li> <li>今天的北京天氣真好把夸，就是不暖和</li> <li>今天的北京天氣真好，就是不暖和</li> <li>今天的北京天氣真好铭污，就是不暖和</li> </ul> </body> </html>小伙伴自己動手練習一下噻
內容結束知識不結束
負margin的作用其實有很多恋日，比如還有
-
3D文字特效
image.png 微調元素位置
-
利用負margin制作自適應左右布局
image.png -
制作元素重疊
image.png -
在Tab選項卡中的應用（如圖）
tab布局
寫在后邊--結束語
負margin因為可以自身不添加額外標記就能定位元素的能力，并且兼容性強大而顯得特別重要况凉。我們會越來越發(fā)現布局中負margin的方便。
image.png
