css布局之负外边距的妙用

在利用css布局时，理解浏览器如何根据css属性进行渲染我觉得对于控制排版是非常重要的，一般我在脑中会把元素设想为一个个盒子，盒子有内部，有外部，浏览器就是按顺序根据样式把一个个盒子排列起来，而盒子之间边界是包含外边距的边界，起点是左上角。
图取自w3school
通过设置width，padding，margin等属性可以调节整个盒子的大小，而对于浮动元素，个人理解就像是设置对块级元素不可见一样，所以不影响块级元素的排版，但对内联元素又是可见的。而相对定位和绝对定位则是飘起来了。

在样式设置时可以吧边距设为负值可以起到一些非常好的效果（注意：只能设置负外边距，不能设置负内边距，浏览器会忽略负内边距），尤其有一些比较经典的排版都是利用负外边距的特性，而负外边距本质上就是把边界缩小，不论盒子内容是在边界内还是边界外，浏览器会根据边界对所有盒子进行排列。
首先看一下两栏布局，主内容区可以根据浏览器自行调节，如图：

代码如下：

html:
    

    

        
Lorem ipsum dolor sit amet, consectetur 
        adipisicing elitNam necessitatibus consectetur 
        quam rerum temporibus, dignissimos consequuntur 
        distinctio soluta odio corrupti.
                                                                                                            
    
css:
    #side {
        float: left;
        width: 200px;
        height: 100px;
        margin-right: -200px;
        background-color: #f9c;
    }
    #content {
        width: 100%;
        height: 100px;
    }
    #content p {
        height: 100%;
        padding-left: 20px;
        margin-left: 210px; 
        background-color: #9cf;
    }

为了实现效果，把侧边栏浮动，以便主内容区和侧边栏在一行，如果不设置为浮动，那么侧边栏会始终占据一行，而无论其位置在哪。在这里似乎没有体现负外边距的价值，那是因为主内容区没有浮动，所以本身排版不受侧边栏影响，但当把主内容区也浮动，其价值就体现出来了。
事实上通过把负外边距设为负值，侧边栏的盒子就好像如图变形了

当侧边栏宽度和负外边距值大小一样，即相当于可排版宽度为零，所以当主内容区浮动且宽度设为100%时，就向上移了，因为上面侧边栏这一行可以放下。
通常为了使移动端首先看到主内容区，会把主内容区放在上头，侧边栏放在下面，这是css代码修改如下：

#side {
    float: left;
    width: 200px;
    height: 100px;
    margin-left: -100%;
    background-color: #f9c;
}
#content {
    float: left;
    width: 100%;
    height: 100px;
}
#content p {
    height: 100%;
    padding-left: 20px;
    margin-left: 210px; 
    background-color: #9cf;
}

效果是一样的：

原理是：当把左外边距设为负值，当这个值绝对值大小小于宽度时，根据上述可知边界缩小，重新排版后即相当于左移一样，如图：

当值等于宽度时，则可排版宽度为零，所以侧边栏会直接在上一行进行排版，但是内容区的显示不会受影响，所以看到的效果如图：

继续增大外边距绝对值，会看到侧边栏继续左移，那是由于边界与内容区距离增大，而排版位置不变，所以内容区向左移动，当设为-100%时，即移到我们想要的位置上。
对于侧边栏在右边的布局，原理是一样的，不同的是设置左外边距还是右外边距：
如果html中侧边栏在上，则这样写：

#side {
    float: right;
    width: 200px;
    height: 100px;
    margin-left: -200px;
}

如果html中侧边栏在下，则这样写：

#side {
    float: left;
    width: 200px;
    height: 100px;
    margin-right: -200px;
}

或者：

#side {
    float: right;
    width: 200px;
    height: 100px;
    margin-left: -200px;
}

一些比较经典的布局如圣杯布局都是采用这样的思路，另外可参考nec

元素样式设置

利用负外边距也可以扩充元素宽度，例如：块元素宽度默认为100%，当想增大宽度时，可以把左外边距设为某个负值，这样排版边界就发生变化了，则元素相当于左移，但宽度始终占满一行，所以看起来就像宽度增大了一样，同理向右增大宽度可设置右外边距为负。Bootstrap中设置row的宽度就是这样，从而消除了两边列多余的内边距：

.row {
    margin-left: -15px;
    margin-right: -15px;
}

总结：合理使用负外边距，理解排版原理，可以起到非常好的效果