css负边距

本片博客学习segmentfault这篇文章后，实践理论后所写，偏向实践图文验证，部分好的概念性东西，直接引用。

我们在写css的时候，可能往往忽略了如果css设置负边距的情景，

• 他们是完全有效的CSS
• 负边距不是在hack，这是尤其正确的。正是因为没有很好地了解负边距才是导致各种奇怪的问题。只有在被用来解决其他地方的bug的时候才是hack
• 它符合正常的文档流
• 它是相当好的兼容性，负边距基本上被所有现代的浏览器支持（IE6的大部分情况也是）

接下来我们就来深度探索一下css设置负边距会出现什么状况。

为了便于观察，我们将背景设置为灰色

1.单个元素相当于父元素设置负边距

    <div class="div1">
        div1
        <div class="div2">div2</div>
    </div>

    .div1{
        width: 200px;
        height: 200px;
        border: 1px solid green;
    }
    .div2{
        width: 100px;
        height: 100px;
        margin-top: -40px; 
        /*margin-left: -40px;*/
        background-color: red; 
        border: 1px solid #000;
    }

总结：可以看出，设置负边距的元素脱离父元素而去，并且是以覆盖的形式，当我给div1设置了z-index：1000之后，惊奇的发现这一个效果，竟然没有变化

2.浮动元素负边距

    <div class="div1">div1</div>
    <div class="div2">div2</div>

    .div1{
        width: 100px;
        height: 100px;
        float: left;
        margin-right: -20px;
        background-color: red; 
        border: 1px solid green;
    }
    .div2{
        width: 100px;
        height: 100px;
        float: left;
        border: 1px solid #000;
    }

然后我们看结果如上图，负值直接被div2吞掉。好神奇。

运用负边距（主要是margin负边距），我主要的应用：二列自适应布局，双飞翼布局&圣杯布局，阴影字体等应用