负边距、三栏布局

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

<li>负边距移动时，其原本位置所占空间会和元素一起移动，也就是说会改变后面元素的位置。
<li>position: relative 是相对于元素原本的位置移动，其特性是不脱离文档流，所以其原本位置所占空间还会保留，不会影响到后面的元素。

2.使用负 margin 形成三栏布局有什么条件?

1.三栏都必须浮动。
2.布局顺序是中左右。

3.圣杯布局与双飞翼布局的原理是怎样的? 区别是什么，简述步骤。

<li>圣杯布局的原理是利用了负margin可以使元素上移的特性，通过给父元素添加padding撑开父元素，再定位子元素的位置。

步骤：
1.设定三栏浮动。
2.使用负margin使元素上移。
3.用padding撑开父元素。
4.用相对定位调整元素位置，以脱离中间栏。
<li>双飞翼布局与圣杯布局原理大致相同，都是利用了负margin可以使元素上移的特性，不同的是双飞翼布局通过增加了一个div来达到目的。

步骤：
1.设定三栏浮动。
2.使用负margin使元素上移。
3.给中栏增加一个div，设置左右margin，将原本中栏的颜色删除。

区别：
圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决”中间栏div内容不被遮挡“问题的思路不一样。

通俗的话讲，圣杯布局是：“我就在这，你们想上来，自己往边上走。”
双飞翼布局是：“好好好你们厉害我给你们让位置。”

本文版权归本人和饥人谷所有，转载请注明来源。