圣杯布局和双飞翼布局

圣杯布局

• 在html中，先把中间的主区块middle放在容器的最前面，接着是left，最后是right。这样可以先渲染重要的区块，有利于搜索引擎优化。

• 圣杯布局是实现左右宽度固定，中间自适应。

.main{
  width: 100%;
  background: blue;
  height: 300px;  
}
.left{
  width: 200px;
  height: 300px;
  background: red;
}
.right{
  width: 150px;
  height: 300px;
  background: orange;
}

• 将三栏都设置为左浮，这样两个侧边栏才能到中间区块的middle上面去。

.main, .left, .right{
  float: left;
}

• 再利用负margin让左边栏和右边栏跑到中间区块的两边。对左边栏设置margin-left: -100%，右边栏的margin-left设置为自身的宽度。这样两个侧边栏就会分别覆盖中间区块的左右边。

.left{
  margin-left: -100%;
}
.right{
  margin-left: -150px;   /* 右边栏自身的宽度 */
}

• 到上一步为止，left和right栏已经到了正确的位置，接下来是要解决覆盖的问题。圣杯布局的解决方案是先对包裹三栏的容器设置好padding。可以上下为0，左右分别为左右两栏的宽度。

.wrapper{
      padding: 0 150px 0 200px;
  }

• 接着，再利用相对定位，把左右两栏分别移动到对应的padding上去。

.left{
  position: relative;
  left: -200px;
}
.right{
  position: relative;
  right: -150px;
}

双飞翼布局

• 首先和前面圣杯布局一样，中间的主区块main放在html的最前面，接着是子列sub和附加列extra。然后利用负外边距让sub和extra回到正确的位置。
• 接着面临一个同样的问题，那就是sub和extra覆盖了main的左右两边的内容。双飞翼布局就是在main的外部再加一个div标签来包裹中间区块，宽度为100%。然后再设置main的左右外边距，使它回到对应的位置。
  html结构：

      

          
你好
      
      

      

  

CSS部分：

.middle .main{
      margin-left: 200px;
      margin-right: 150px;
  }