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团队提出的，淘宝网的头部部分就使用了此布局：