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

圣杯布局和双飞翼布局

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

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

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

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

            
                
                    <divclass="header">
                    </div>
                    

                    <divclass="body">
                    

                    <divclass="middle">middle</div>
<divclass="left">left</div>
<divclass="right">right</div>
</div>
<divclass="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结构部分：

            
                <divclass="header">
                </div>
                

                <divclass="body">
                

                <divclass="middle">
                

                <divclass="inner">main</div>
</div>
<divclass="left">left</div>
<divclass="right">right</div>
</div>
<divclass="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团队提出的，淘宝网的头部部分就使用了此布局：