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

答：使用负边距的时候会改变元素在文档流中的位置。负边距的作用能拉动其他没有脱离文档流的元素，而设置position：relative之后元素原来在文档流中占据的空间仍会保留，它只是相对于自己原来在文档流中的位置进行偏移，如下图所示：

使用负margin.png

使用position relative.png

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

条件：
1、需要左右侧边栏及主内容均为浮动的块级元素；
2、主内容需在最前面；
3、左侧边栏需设置margin-left为-100%，右侧边栏需设置margin-left为它本身宽度的负值；

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

原理：采用负边距使得浮动元素达到预设的位置后，再使用padding使得两侧留出空白区域待左、右边距占用，然后再使用相对定位使得左、右边距能够流向预定的位置。
步骤：
①首先写出圣杯布局的DOM结构

DOM结构.png

设置负margin.png

③最后设置父容器的内边距为aside和extra的自身宽度（内边距可大于aside和extra的自身宽度），并且对这俩栏设置相对定位为自身宽度。

Paste_Image.png

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

双飞翼布局与圣杯布局的不同点在于，它不是用主区块中设置padding来形成三栏的方式，而是在主区块中设置一个子元素，再对这个子元素设置外边距的值来形成三栏。

双飞翼布局.png