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

负边距会使由文档流控制的元素在文档流中的位置发生偏移。通过相对定位偏移，仍然会占据它原来占据的空间，不会让文档流的其它元素进入。而通过负边距进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间。

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

1.负margin会改变浮动元素的显示位置，三栏布局侧边栏aside采用负margin移动后，侧边栏extra也会跟着它移动，这时设置aside margin-left:负它的实际宽度,设置extra margin-left：-100%，就可以实现侧边栏覆盖到主main内容左右两边。
2.再在中间main div里再创建一个子div名为wrap，利用wrap的margin-left和margin-right移动侧边栏，实现主内容和两边侧边栏的间隔。

  .main{
        width:100%;
        height: 200px;
        float: left;
    }
    .wrap{
        height: 200px;
        background: rgba(90, 243, 151, 0.8);
        margin:0 110px;
        padding:0 100px;
    }
    .aside{
        width: 200px;
        height: 500px;
        background: blue;
        float:left;
        margin-left: -200px;
    }
    .extra{
        width: 200px;
        height: 500px;
        background: pink;
        float: left;
        margin-left: -100%;
    }

结果为：

Paste_Image.png

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

原理：圣杯布局指两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。参考：圣杯布局原理。其流程为：1）设置container的左右padding，用于预留左右边栏的空间。2）给所有元素设置定位和浮动，用于设置左右两栏偏移。3）给左侧边栏设置right，让其移动位置，设置负边距100%（#center的宽度），让其跑到上面。4）给右边栏设置负边距使其跑到上面。

<style>
    .ct{            
        border:1px solid;
        padding-left: 120px;
        padding-right:170px;
    }
    .ct:after{
        content: "";
        display: block;
        clear: both;
    }
    .main{
        width:100%;
        height: 200px;
        background: rgba(90, 243, 151, 0.8);
        float: left;
    }
    .aside{
        position: relative;
        left: 170px;
        width: 100px;
        height: 100px;
        background: blue;
        float:left;
        margin-left: -100px;
    }
    .extra{
        position: relative;
        left: -120px;
        width: 100px;
        height: 100px;
        background: yellow;
        float: left;
        margin-left: -100%;
    }
</style>
</head>
<body>
<div class="ct">    
  <div class="main">main</div>
  <div class="aside">aside</div>
  <div class="extra">extra</div>
</div>
</body>

流程：
1.main中间区域要根据浏览器宽度的变化而变化，所以要用100%。左中右三块都要设置左浮动，方便下面的内容上去。
2.把左层aside负margin100px后，发现aside上去了，移动到上面main区块最后边。

Paste_Image.png

在相对定位（left=170px）就到了侧边栏右边。

Paste_Image.png

3.同样的道理设置左边栏。

总结来说就是利用负边距，把左右栏定位，再利用相对定位根据主区块的padding确定偏移值。

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

双飞翼布局只不过额外增多一个div，利用浮动和负边距就可以实现和圣杯布局一样的效果。具体效果如下所示。
方法是去掉左右栏的相对定位，去掉包裹层padding，在中间栏新增div，利用margin值实现左右间隔。
例子：

 <style>
  .ct{          
        border:1px solid;
    }
    .ct:after{
        content: "";
        display: block;
        clear: both;
    }
    .main{
        width:100%;
        height: 200px;
        float: left;
    }
    .wrap{
        height: 200px;
        background: rgba(90, 243, 151, 0.8);
        margin:0 110px;

    }
    .aside{
        width: 100px;
        height: 100px;
        background: blue;
        float:left;
        margin-left: -100px;
    }
    .extra{
        width: 100px;
        height: 100px;
        background: pink;
        float: left;
        margin-left: -100%;
    }
</style>
</head>
<body>
<div class="ct">    
  <div class="main">
      <div class="wrap"></div>
  </div>
  <div class="aside"></div>
  <div class="extra"></div>
</div>
</body>

结果如下：