负边距、三栏布局

问答

---

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

答：

• position: relative的偏移并没有造成文档流的脱离，所以不会对后续元素造成偏移的影响，而负边距会造成后续元素的偏移。
• 负边距与position: relative的区别DEMO

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

答：

• 三栏布局必须都是是浮动元素
• 父元素必须清除浮动

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

答：

• 通过负边距与父容器的padding值来实现左右栏固定与中间主内容自适应的布局
• 1. HTML结构

<!--html结构-->
<div class="container">
        <!--优先渲染主内容区-->
        <div class="main"></div> 
        <div class="side-L"></div>
        <div class="side-R"></div>
</div>

2. CSS设置，main side-L side-R设置浮动，container 清除浮动设置padding值，side-L设置负边距100%移动到内容区的左边，side-R设置负边距为自身的宽度，偏移到主内容区的右边。

/*css结构*/
.container{
        padding: 0 200px 0 200px; /*给左右边栏预留出200px的宽度*/
}
.side-L,.main,.side-R{
        float: left; /*实现三栏布局的要求*/
}
.side-L{
        margin-left:-100%; /*移动父元素的100%的宽度*/
}
.side-R{
        width: 200px;
        margin-left: -200px; /*移动到主内容区域的右方*/
}

DEMO

3. CSS设置 .side-L .side-R 的position:relative属性，.side-L 的 left: -200px，.side-R的left:200px，就可以实现左右两栏固定，中间主要部分自适应的圣杯布局。
   DEMO

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

答：

• 和圣杯布局相像，在主内容区添加一个包裹层浮动，然后内容区设置外边距即可，左右栏不必添加position属性设置。

<!--html结构-->
<div class="container"> 
<!--优先渲染主内容区--> 
      <div class="m-wrapper">
          <div class="main"></div> 
      </div>
      <div class="side-L"></div> 
      <div class="side-R"></div>
</div>

• 设置.main的外边距值实现双飞翼布局
  DEMO