margin设置负值有什么效果

• margin-left负值，元素自身向左移动
• margin-top负值，元素自身向上移动
• margin-right负值，右边的元素向左移动
• margin-bottom负值，下边的元素向上移动
• 用于增加宽度，用于圣杯布局和双飞翼布局

圣杯布局

• 两边固定宽度，中间自适应宽度
• 做法：先浮动变成同一行（父级清除浮动），因为中间是主要内容需要自适应宽度所以宽度为100%，下一步需要把两边的宽度预留出来，所以在父级里面加入对应的左内边和右内边，然后需要把左右两边移入上去，所以需要在对应的样式里面写上margin-left/margin-right使元素向左/右移动，左：这时元素在父级内容最左边，需要相对定位（文档流内，对其他元素不造成影响）放到最左边.右就不用。

* {
        margin: 0;
        padding: 0;
    }
    .container {
        overflow: hidden;
        padding-left: 200px;
        padding-right: 150px;
        background-color: #ccc;
    }
    .item {
        float: left;
        color: white;
        font-size: 20px;
    }
    .content {
        width: 100%;
        height: 200px;
        background-color: green;
    }
    .left-item {
        width: 200px;
        background-color: red;
        margin-left: -100%;  100%是父级宽度的100%
        position: relative;
        right: 200px;
    }
    .right-item {
        width: 150px;
        background-color: blue;
        margin-right: -150px;  其他元素当他宽度少了150px
    }
    <div class="container">
        <div class="content item">主要内容</div>
        <div class="left-item item">left-item</div>
        <div class="right-item item">right-item</div>
    </div>