负边距，三栏布局

负边距在让元素产生偏移和 position:relative有什么区别？

负margin会使相邻的浮动元素后inline-block元素产生偏移，而position:relative则不会影响。

使用负margin形成三栏布局有什么条件？

• 三栏全部浮动。
• 渲染顺序为中左右。
• 左右栏宽度固定。

圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤。

使用负margin使浮动元素上移，父容器加padding实现。

1. 设置三栏元素浮动；
2. 用负margin是左右两栏上移，左边栏margin-left设置-100%，右边栏设置margin-left为负的自身宽度。
3. 父容器设置padding为左右两栏固定宽度，使父容器撑大。
4. 使用position:relative调整左右两栏位置。

双飞翼布局的原理? 实现步骤?

在圣杯布局的基础上，不再设置父容器padding撑开宽度，在中间栏建一个字div，设置盒子的margin实现。

1. 设置三栏元素浮动；
2. 用负margin是左右两栏上移，左边栏margin-left设置-100%，右边栏设置margin-left为负的自身宽度。
3. 在主栏里面再加上一个子div。在子div里面设置左右margin的值(大于等于左右两栏的宽度) 。