css负外边距的理解

负边距如果可以正确的使用的话它的功能是很强大的。有两种场景负边距是很重要的。

• 在static元素中使用负边距
  
  一个static元素是一个没有使用过float的元素。上面的图片展示了一个static的元素使用负边距之后的情况。

当一个static元素在top/left使用负边距时，它把元素向这个特定的方向拉，比如

/* Moves the element 10px upwards */
#mydiv1 {margin-top:-10px;}

但是当你将负边距设置为相对bottom/right时，它并不会把元素向下或右拉，相反，它会把后面的元素往里面拉，从而覆盖自己。

/*
 所有在#mydiv1后面的元素都会向上
 移动10px，而#mydiv1一点都不会移动
*/
#mydiv1{margin-bottom:-10px;}

如果宽度没有设置，左右负边距会把元素向两个方向拉以增加宽度。在这里margin的作用相当于padding
[一个demo：水平等距排列,扩大了ul的宽度]

• 在浮动中使用负边距
• 假如下面就是我们的html代码：

<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>

如果对一个浮动的元素使用负边距，它会产生一个空白，其他元素就可以覆盖这一部分。这个技巧可以很好地用户流式布局。比如有一列宽度100%，另一列有固定的宽度，比如说100px。

/* 
A negative margin is applied opposite the float 
*/
#mydiv1 {float:left; margin-right:-100px;}

如果两个元素都使用了左浮动并且设置margin-right:-20px。#mydiv2会把#mydiv1看成宽度缩小20px（所以会覆盖一部分），但是有趣的是#mydiv1并不会有任何变化，而是依然保持原先的宽度。

如果负边距和宽度一样大的话，它就会被完全覆盖掉。因为外边距，内边距，边框和内容加起来等于元素的宽度。如果负外边距等于元素的宽度的话，那么该元素的宽度就会变成0px。

将一列列表转换成三列 https://codepen.io/niusz/pen/gzoxzN 通过margin-left 空开左边距，然后通过margin-top: -2.6em 将下面的元素拉上来

[圣杯布局]圣杯布局的缺点是：在父容器中使用了padding,使得本身宽度变小，当屏幕缩小时，main 内容会掉下来。

[双飞翼]双飞翼在main下面又加了一层content,用它来包括内容。然后设置margin-left和margin-right来空出content的内容。