小 Tip：margin 负值详解

先看看 margin

margin： CSS外补白，外边距，是从自身边框到另一个容器边框之间的距离。

四个方向：

上边距：margin-top

下边距：margin-bottom

左边距：margin-left

右边距：margin-right

简写：

margin:10px 20px 30px 40px;

上边距为10px

右边距为20px

下边距为30px

左边距为40px

margin:10px 20px 30px;

上边距为10px

右左边距都为20px

下边距为30px

margin:10px 20px;

上下边距都为10px

右左边距都为20px

margin:10px;

上右下左边距都为10px

margin负边距

margin为 正值 时，元素在 文档中所占位置 是从border之外向四周 扩展 的，而为 负值 时，则是向内 收缩 的(图2)。

正值的时候，元素所占的位置向周围扩散了20px

图1

这是负值，可以看到，第二个元素实际 所占的位置 已经少了20px，反映在页面就是，元素2向左偏移了20px

图2

当偏移大于自身宽度的时候，自身将不再 占有位置 ，后续的元素会无视他（就当没有你这个兄弟！）（图3左负值，图4右负值）

图3

图4

但是，当元素没有固定宽度的时候（或者 width:auto;），负值会增加自身宽度！看图，两边露出来了！这是要逆天啊，有木有！

图5

仔细看就会发现，margin只是对元素在 文档中所占的位置 产生影响，正值扩大，负值缩小，记住这点，咱们就可以做很多有意思的东西。

实例

经典的利用绝对定位来垂直水平居中，如图6： 给元素绝对定位，left、top分别为50%；然后margin-top为 负的高度的一半、margin-left为 负的宽度的一半。

图6

列表布局有边框，如图7：

图7

这样可以直接上左都为-1px，然后相对定位，z-index:0 ， 父级padding上左为1px。

也可以右下都为-1px，相对定位，z-index:0，父级只需padding-bottom为1px

还是列表，有间距的列表，如图8：

图8

这个利用负值介绍中的第四条（当元素没有固定宽度的时候（或者 width:auto;），负值会增加自身宽度），会特别简单，看代码

右边固定，左边自适应布局，如图9：

图9

给左边盒子加个父级，宽100%、左浮动，左边黑字margin-right： 右边盒子的宽；右边盒子固定宽、左浮动，margin-left：负的本身宽度。

这样当外层的宽度变换的时候，左边的盒子会跟随变化，具体看代码：

还有经典的等高列布局，如图10：

图10

还记得前面讲的 margin只是对元素在 文档中所占的位置 产生影响 吗？

如果给margin-bottom负值，那么他所占的位置会往上收缩，利用这个特性，我们可以做等高列布局，看代码：

先这么多，待续...

有不明白的可以留言☺