三栏布局

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

  • 负边距让元素产生偏移会影响后面的元素，因为它不占有原来的位置

    
    原本的位置

.div:nth-child(2) {
    margin-top: -30px;
    margin-left: -20px;
}

margin-left
很明显看出当第二个div移动的时候，后面的元素跟随着一起移动，说明它不占有原来的位置
- position: relative;还占有原来的位置，相对原来的位置定位

.div:nth-child(2) {
    position: relative:
    top: 30px;
    left: 50px;
}

position: relative;

• 使用负 margin 形成三栏布局有什么条件?
  假设三栏布局中的中间一栏为main，左边栏为left，右边栏为right
  1. 在html结构中，必须main在前面

  <div class="contain">
      <div class="main"></div>
      <div class="left"></div>
      <div class="right"></div>
  </div>
  

  2. 三栏布局中的三个块必须先浮动,因为div的默认是垂直一个接一个放置的，必须让left和right跟随在main的后面
  3. 中间块必须width: 100%;因为：
     1. float之后div的宽度是内容宽度
     2. 因为三栏布局中的中间一栏需要自适应
     3. 必须把left和right顶到下一行
  4. left的margin-left: -100%;，right的margin-left的值为本身宽度的负数
• 圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
  圣杯布局的目的是使中间栏的内容得以先渲染，原理是利用浮动加负margin来实现三栏布局，然后在#contain上加padding，再把两个边栏用相对定位移到正确的位置
  1. 先写好html的结构，注意中间栏要在两个边栏的前面

  <div id="header"></div>
  <div id="contain">
      <div class="main"></div>
      <div class="sub"></div>
      <div class="extra"></div>
  </div>
  <div id="footer"></div>
  

  2. 设置main的宽度100%，三个div左浮动

  #contain>div {
      height: 300px;
      float: left;
  }
  
  .main {
      width: 100%;
      background-color: #e65454;
  }
  
  .sub,.extra {
      width: 200px;
  }
  

2016-08-03_005106.png

3. 把两个边栏移动到正确的位置
```
.sub {
    background-color: #03A9F4;
    margin-left: -100%;
}

.extra {
    background-color: #4CAF50;
    margin-left: -200px;
}
```

2016-08-03_005929.png

4. 让内容能正确显示不被两个边栏覆盖
```
#contain {
    overflow: hidden;
    padding: 0 200px;
}
.sub {
    background-color: #03A9F4;
    margin-left: -100%;
    position: relative;
    left: -200px;
}

.extra {
    background-color: #4CAF50;
    margin-left: -200px;
    position: relative;
    left: 200px;
}
```

2016-08-03_005902.png

• 双飞翼布局的原理? 实现步骤?
  双飞翼布局的目的是使中间栏的内容得以先渲染，原理是利用浮动加负margin来实现三栏布局，相比圣杯布局，双飞翼布局的区别在于最后正确显示内容的方式
  • 写html结构，注意双飞翼布局在main下还有一个显示内容的div

  <div id="header"></div>
  <div id="contain">
      <div class="main">
          <div class="content"></div>
      </div>
      <div class="sub"></div>
      <div class="extra"></div>
  </div>
  <div id="footer"></div>
  

  • 和圣杯布局一样利用浮动+负外边距得到三栏布局

    
    2016-08-03_005623.png
  • 让内容能正确显示不被两个边栏覆盖，这里是圣杯布局和双飞翼布局的区别，双飞翼布局不适用main来显示内容，而是在main下新建一个div，设置属性margin-left和margin-right来达到正确显示内容的目的

  .content {
      margin-left: 200px;
      margin-right: 200px;
  }
  

2016-08-03_010935.png