css布局（负边距）

本文转载于http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812
https://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html

基本原理

负边距在普通文档流中的作用和效果
那些没有脱离文档流中的元素（不是浮动元素、绝对定位和固定定位的元素等），其在页面中的位置是随着文档流的变化而变化。负边距对这些由文档流控制的元素的作用是，会使他们在文档流中的位置发生偏移，会放弃偏移前占据的空间，这样它后面文档流中的其他元素就会流过来填充这部分空间。文档流在计算元素位置的时候，会认为负边距把元素的尺寸减少了，所以位置也就发生了变化，但实际尺寸并没有减少，文档流只能是后面的流向前面的，即文档流只能向左或向上流动，不能向下或向右移动。
总之，在文档流中。元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界线向里收，文档流认的只是这个边界，不会管你实际的尺寸。

左和右的负边距对元素宽度的影响
负边距不仅能影响元素在文档流中的位置，还能增加元素的宽度！作用的前提是该元素没有设定宽度（当然：width：auto）也是可以的。

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

负边距对绝对定位元素的影响
绝对定位的元素，如果margin为正的时候，那它的边界是向外扩的，如果margin为负的时候，则它的边界是向里收的。

应用实例

一、左右列固定，中间列自适应布局
HTML:

  <div class="parent">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right">world</div>
    </div>

CSS:

.left{
        width: 200px;
        float: left;
        height: 200px;
        background-color: red;
    }
.center{
    width:100%;
    height:200px;
    float:left;
    margin-right: -400px;
    background-color: pink;
}
.right{
    width: 200px;
    float: left;
    height: 200px;
    background-color: green;
}

效果如下：

二、去除列表右边框
HTML：

  <div id="test">
        <ul>
            <li>子元素1</li>
            <li>子元素2</li>
            <li>子元素3</li>
            <li>子元素4</li>
            <li>子元素5</li>
            <li>子元素6</li>
        </ul>
    </div>

CSS:

 body,ul,li{ padding:0; margin:0;}
 ul,li{ list-style:none;}
 #test{
     width:320px;
     height:210px;
     background:#CCC;
 }
 #test ul{
     margin-right:-10px;
     zoom:1;
 }
 #test ul li{
     width:100px;
     height:100px;
     background:#F60;
     margin-right:10px;
     margin-bottom:10px;
     float:left;
 }