CSS布局之负边距

CSS中负边距是布局中常用到的技巧，很多的布局方法也会依赖负边距。

再思考盒模型

css最基础的也是最基本最重要的就是盒模型的概念
盒模型示意图：

border和border以内部分是我们可以看到的“实体”部分，margin可以认为是隐藏起来的“框”，这个“框”定义了“实体”在文档流中的边界或者说大小。（这似乎有点绕，好好理解一下）

①、在默认的情况下，这个“框”和“实体”的边界重合，也就是“margin=0；”
②、margin值为正，“框”向外扩展，使得“实体”在文档流中的边界扩大，在“实体”的周围就会出现边缘的空白。
③、margin值为负，“框”向内收缩，使得“实体”在文档流中的边界缩小，在文档流中占的位置就会变小，“实体”部分就会覆盖其他元素或者被其他元素覆盖。

当margin-top、margin-left为负值时，“实体”的上边界和左边界会向内缩，表现的效果就是元素上移、左移，有可能会覆盖上侧或者左侧的其他元素文档流中的位置也会发生相应的变化。
当margin-right、margin-bottom为负值时，“实体”的右边界和下边界会向内缩，表现的效果就是元素后边的和下边的元素上移、左移，元素被后边的或者下边的元素覆盖。

---

负边距在不同场景的应用

负边距在普通文档流中的作用和效果

负边距对这些由文档流控制的元素的作用是，会使他们在文档流中的位置发生偏移，这样它后面文档流中的其它元素就会“流”过来填充这部分空间。

负边距不仅能影响元素在文档流中的位置，还能增加元素的宽度！
前提是：该元素没有设定width属性，或者width属性设为auto。

举个栗子
下图绿色部分是个块级元素，没有设定高度，被包裹在一个宽度为300px，水平居中的父元素中。

现在给这个元素设定一个负边距：margin-left:-100px;

这个元素的宽度确实边长了100px；再设定：margin-right:-100px；

宽度居然改变了！？？？这是什么鬼。但事实就是这样。
可以用它做什么呢？

上图黑框中，多个元素按顺序排下来，中间带间隔的布局。
该怎么实现呢？
首先就会想到浮动。把黑框内的子元素向左浮动，设一个合适margin-right值。
但是如果这样做，在靠近黑框右边缘的子元素就不应该有margin-right值了。如果黑框是固定宽度，可以在最右边的元素上加一个class，然后把它的margin-right设为0。那黑框的宽度不是固定的呢？
解决办法： 加大子元素的父元素的宽度，让他可以多容纳一个“间隔”的宽度，然后在外面的容器设定 overflow:hidden就可以了。
增加父元素宽度就可以使用负边距了，当然也可以使用固定宽度。

负边距对浮动元素的影响

举个栗子：

下图是三个向左浮动的元素，宽高都是100px

都设定一个margin-right:-50px;

后边的元素覆盖到前面的元素上

再举个栗子：
下面是是三个向左浮动的元素，宽高都是100px。虚线边框宽度为280px。

父元素也就是虚线框的宽度不够了，盒子3就掉到了下边。
给盒子3设定一个 margin-left:-20px; 时

盒子3跑到了上边，并且覆盖了盒子2，覆盖的宽度是20px。
给盒子3设定 margin-left:-50px; 时

盒子3覆盖了盒子2，覆盖宽度是50px；
给盒子3设定margin-left:-100px; 时

盒子3完全覆盖了盒子2的位置。
给盒子3设定margin-left:-200px; 时

盒子3完全覆盖了盒子1的位置。

圣杯布局和双飞翼布局都是这个原理。
元素写在后面，也可以通过使用负边距的方法让其显示在前面。

负边距对绝对定位的影响

css经典的绝对定位居中的方法就是利用了负边距

.box{
    width:100px;
    height:100px;
    background-color:red;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-50px;/*宽度的一半*/
    margin-top:-50px; /*高度的一半*/
}