css布局之圣杯布局和双飞翼布局

圣杯布局和双飞翼布局

今天看了很多圣杯布局和双飞翼布局的技术博客，通过自己的理解总结一下吧。

• 1.二者相同点： 
  实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果是一样的。

• 2.不同点： 
  圣杯布局知识点：浮动，负边距，相对定位，不需要添加额外标签。 
  双飞翼：只用到浮动，负边距，不需要使用相对定位，需要添加一个额外的标签。 
  
  

• 注意：html结构中中间部分要写在左右布局之前，为了优先渲染。 
  
  
  
• 下面就先来看一下圣杯布局的实现过程吧： 
  先写出基本DOM结构:

    <div class="header"></div>
    <div class="body">
        <div class="middle">middle</div> 
        <div class="left">left</div>
        <div class="right">right</div>
    </div>  
    <div class="footer"></div>

然后给出基本的样式：

      * {
        margin:0;
        padding:0;
      }
      .header {
        width: 800px;
        height: 60px;
        background-color: #ccc;
      }
      .body {
        width: 800px;
      }
      .middle{
        width: 100%;
        background-color: #cc0;
      }
      .left{
        width: 100px;
        background-color: #c0c;
      }
      .right {
        width: 150px;
        background-color: #0c0;
      }
      .footer {
        width: 800px;
        height: 60px;
        background-color: #ccc;
      }

实现效果如图：

接着给body部分三个块加上浮动 float:left，别忘了footer部分清除浮动clear:both。

因为middle部分宽度100%，所以left和right挤到下面，如图示：

那么怎么使left和right块跑到middle上呢，关键的一步来了，给left一个负边距margin-left:-100%; 对的，你没有看错，注意是-100%也就是middle的自适应宽度值，这样left块就跑到middle最左边了，同理，给right一个负边距margin-right: -150px;(right块的自身宽度值)，这样right块就跑到middle最右边了，效果如图：

当然这样还不行，因为middle盒子里的内容会被left和right挡住，如图:

所以，我们先给这三个块的父级容器即body加一个padding值： 
padding-left: 100px; padding-right:150px;，同时body的宽度值800px减去padding改为 550px；可以看到:

最后压轴部分来了，要使用相对定位把左右块分别拉到左右边，给left一个position:relative; left: -100px; 给right 一个position:relative; right:-150px; 就大功告成了:

总体css代码如下:

      * {
        margin:0;
        padding:0;
      }
      .header {
        width: 800px;
        height: 60px;
        background-color: #ccc;
      }
      .body {
        width: 550px;
        padding-left:100px;
        padding-right:150px;
      }
      .middle{
        float:left;
        width: 100%;
        background-color: #cc0;
      }
      .left{
        float:left;
        width: 100px;
        position: relative;
        left: -100px;
        margin-left:-100%;
        background-color: #c0c;
      }
      .right {
        float:left;
        width: 150px;
        position: relative;
        right:-150px;
        margin-left:-150px;
        background-color: #0c0;
      }
      .footer {
        clear:both;
        width: 800px;
        height: 60px;
        background-color: #ccc;
      }

其实双飞翼布局相比圣杯布局就只是改动了一小点，在middle标签里加一个内部标签，基本实现过程也相差不大，直接看代码吧： 
DOM结构部分：

        <div class="header"></div>
        <div class="body">
            <div class="middle">
                <div class="inner">main</div>
            </div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
        <div class="footer"></div>

样式部分：

*{
        padding:0;
        margin:0;
     }
     .container {
        width: 800px;
        margin:0 auto;
     }
     .header,.footer {
        height: 60px;
        clear:both;
        background-color: #888;
     }
     .middle{
        width: 100%;
        float:left;
        background-color: #cc0;
     }
     .left {
        float:left;
        width: 100px;
        margin-left:-100%;
        background-color: #c0c;
     }
     .right {
        float:left;
        width: 150px;
        margin-left: -150px;
        background-color: #0cc;
     }
     .inner {
        margin-left:100px;
        margin-right:150px;
     }

双飞翼布局是淘宝UED团队提出的，淘宝网的头部部分就使用了此布局：