负margin的原理及应用

在很多布局中我们经常能够见到类似于margin:-10px;的用法，我们对正值的用法早已熟悉的不能再熟悉了，可是这负值到底有何用呢？听我给你吹。

负margin——普通文档流

普通文档流元素（不浮动，无绝对定位，无固定定位的元素）。如下图：
代码

图1

负边距会使这些文档流中的元素发生位置偏移，但不同于相对定位的偏移，相对定位的偏移会保留原来的位置，后面的元素不会去占据原有位置。负边距就恰恰相反，使用了负边距的元素不仅会去占别人的地方，自己的地方也会被别人霸占。对图1中box2设置
margin:-10px;，效果如下：

图2

box2左边好像嵌入了浏览器边框，上面盖住了box1，下面被box2盖住了。这就好像负margin改变了box2在文档流中占据的空间大小，使得后面的元素流动了上来。
还要注意的是，文档流只能是后面的流向前面的，即文档流只能向左或向上流动，不能向下或向右移动。
再举一个例子:
代码
父容器不设置高度，高度由子容器撑开，当子容器设置上下负margin时，父容器高度减小。
如图3是设置负margin前的效果：

图3

如图4是设置负margin后的效果：

图4

从审查元素中可以看出设置后父元素的高度减小了10px，而且子元素内容溢出来了。
这就说明：在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，文档流认的只是这个边界，不会管你实际的尺寸是多少。

负margin left/right——对宽度的影响

对于没有宽度的块级元素，设置负margin值，会使块级元素变宽。
举个例子：父容器div设置宽度300px，子元素div不设置宽度，默认宽度为父容器的100%，如图5
代码

图5

当为子元素设置margin-left:-100px;时，如图6，可以看出子元素伸出了父元素，宽度变成了400px。

图6

负margin——浮动元素

利用负margin值可以使因空间不够被挤到下一行的浮动元素重新上去。
举个例子：父容器宽度280px，包含三个设置了左浮动宽度都为100px的div，由于宽度不够第三个浮动元素只能在第二行显示，如图7

图7

为第二行元素设置margin-left:-20px;会使其重新上到第一行，但是会遮挡一部分巧克力色的元素，如图8所示。

图8

负边距对浮动元素的影响与负边距对文档流中元素的影响其实是差不多的。文档流中元素的位置由文档流的走向决定，浮动的元素也可以看成有一个“浮动流”存在，不过浮动流既可以向左，也可以向右。

负margin的具体应用

1. 圣杯布局和双飞翼布局

代码
这两种布局的具体实现就不再赘述，但是它们都是利用了负margin对浮动元素的影响这一特性实现的

图9

2. 元素等间距排列

效果如下图：
代码

图10

实现以上效果的步骤：

让li元素都浮动起来。这样li就会一个挨着一个排列了。
为每个li设置margin-right。这样每个li都会和右边的li有一个间距。
由于父容器的宽度是固定的，其宽度实际上是比3个li的宽度+2个margin-right的宽度，多以我们必须去掉最右边一列的所有li的宽度，才能使父容器一行刚好包裹3个li和2个空隙。我们可以给右边一列的所有li用选择器都去掉边框，但是这种方法很麻烦，而且如果遇到各个li是动态变化的时候，就更难处理了。这时，负边距就有用了。我们只需要为ul添加一个margin-right:-20px;，就完美解决问题。
你可能会问负边距怎么把li的右边距变没了，其实并没有，只是负边距让ul变宽了。
ul的width=3个li的宽度+3个margin-right=360px;
wrapper的width=3个li的宽度+2个marign-right的宽度=340px;
事实上ul是溢出wrapper的，溢出部分就是我们不需要的右边那列的右边距，我们只需要给wrapper加一个overflow：hidden就可以啦。

3. 负边距+绝对定位，实现水平垂直居中

代码
效果如下图：

作者：朱小维
链接：https://www.jianshu.com/p/487d131537b4
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。