margin负值

margin原理

简单来讲大致可以分为：

​ top，left： 相对于相邻元素的下边，右边为参考线；

​ right，bottom：相对于自身的右侧，下侧为参考线；

所以top，left的margin负值会使元素向该方向移动，而right，bottom会拉近相邻元素；

实际应用

介绍

圣杯布局最初是由老外发明的，实现了两侧定宽，中间自适应的布局，因为布局形状酷似圣杯所以叫圣杯布局，而双飞翼布局据说是由淘宝UED在圣杯布局的基础上改进而成的，因为酷似双翼，所以叫双飞翼布局。

1. 圣杯布局

圣杯html：

<div class="container">
        <div class="main">main部分</div>
        <div class="left">left定宽</div>
        <div class="right">right定宽</div>
</div>

利用浮动实现最初效果：

利用margin负值使两侧上浮：

利用container的padding挤出main区域：

利用position：relative让left，right部分移动到两侧：

2. 双飞翼布局

双飞翼html：

 <div class="container">
        <div class="wrapper">
            <div class="main">main部分</div>
        </div>
        <div class="left">left定宽</div>
        <div class="right">right定宽</div>
 </div>

一直到实现三栏并排时，双飞翼布局都与圣杯布局一样，只不过wrapper代替了main部分，效果如图；

图中深色部分其实是wrapper部分

利用main部分的margin将自己两侧空出，给main部分添加背景色，效果如图：

总结：

1. 为了解决中间栏内容被遮挡的问题，圣杯布局利用父级padding将中间栏挤出，再利用相对定位将两侧移动到边缘，而双飞翼布局则是给中间栏包裹一层div，再利用子级的margin将两侧挤出；
2. 双飞翼布局相对于圣杯布局只不过新添了一层html，css少些了几句，并没有孰优孰劣之分；

3. 去除边框重叠

效果如图：

​ 为了实现菜单栏里的边框，通常我们都是给li元素添加左侧或右侧的border，然后利用子代选择器去除掉第一个或最后一个里的border，其实也可以利用margin负值将li元素向左或向右移动对应的距离来去除掉第一个或最后一个的border。

相关链接

圣杯原文