以下内容均为个人整理的观点，一个个字码出来的，不喜勿喷
负margin的理论上一篇大概说了一下，那么到底该怎么使用呢？
根据日常开发和网上整理，大概整理了以下几个常用案例
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真实内容区域是不是已经到了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因为可以自身不添加额外标记就能定位元素的能力，并且兼容性强大而显得特别重要。我们会越来越发现布局中负margin的方便。
image.png
