CSS经典布局之圣杯布局、双飞翼布局

    当我们在用CSS进行页面布局时,常常会遇到:三栏布局,两边顶宽,中间自适应且优先渲染。回想我们所接触过的QQ空间,人人网等个人主页时,常常会遇到此类的布局方式,因此我们应该如何解决?

圣杯布局

圣杯是指一种常用的网页布局,可以由现有的技术(无一没有缺点)来实现,找到一种最优的实现方法就好像寻找难以捉摸的圣杯一样。
我们先贴出实现代码再来具体讲解:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    } 
    h3{
        color: gray;
    }
    .header{
        height: 100px;
        margin: 0 auto;
        border: 2px solid black;
    }
    .footer{
        height: 100px;
        margin: 0 auto;
        border: 2px solid black;
    }
    .artice{
        height: 500px;
        margin: 15px auto;
        border: 2px solid black;
        padding-left: 250px;
        padding-right: 200px;
    }


    .artice .left{
        background-color: paleturquoise;
        float: left;
        width: 250px;
        height: 500px;
       margin-left: -100%;
        position: relative;
        left: -250px;
    }


    .artice .right{
        background-color: #ff7d8e;
        float: left;
        width: 200px;
        height: 500px;
        margin-left: -200px;
        position: relative;
        right: -200px
    }
    .artice .middle{
        background-color: pink;
        float: left;
        width: 100%;
        height: 500px;
    }
</style>
<body>
<div class ="header">
    <h3>This is Top</h3>
</div>
<div class="artice">
    <div class="middle">
        <h3>This is Main</h3>
    </div>
    <div class="left">
        <h3>This is left</h3>
    </div>


    <div class="right">
        <h3>This is right</h3>
    </div>
</div>
<div class="footer">
    <h3> This is L's page</h3>
</div>
</body>
</html>

1.*代表通配符,表示所有的DIV都适用于所设属性,设为0是为了对浏览器无留白,全填充
2.margin可能有以下四种情况的属性:
(1)margin 5px 10px 15px 20px
表示上边距5px,右边距10px,下15px,左20px
(2)margin 5px 10px 15px
表示上边距5px,左/右边距10px,下边距15px
(3)margin 5px 10px
表示上/下边距5px,左/右边距10px
(4)margin 5px
表示上/下/左/右边距为5px
3.float:left,表示向左浮动,因为我们的三列元素都在同一排的,所以我们可以给他一个相同的向左浮动
4.width:auto,表示宽度自适应,也许会随着文档流的改变而改变
5.position:relative,表示相对定位,也是圣杯布局中最重要的一部分,我之前有篇文章也是讲在position中relative和absolute的区别,不懂的地方可以参考,这里就不再具体说明了
6.当我们需要使用到颜色渲染布局时,我们的颜色值应该为相应的颜色代码,比如#FFFFFF,而不是用颜色名称,如red、black,因为不同的网页可能会出现的渲染效果是不同的。

双飞翼布局

双飞翼布局是淘宝UED对圣杯布局的一种优化,其中main可以看成是鸟的身体,sub和extra则是鸟的两个翅膀,在布局的时候,我们先放最重要的,再将翅膀放到适当的地方。
还是先来看代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    h3{
        color: gray;
    }
    .header{
        height: 100px;
        margin: 0 auto;
        border: 2px solid black;
    }
    .footer{
        height: 100px;
        margin: 0 auto;
        border: 2px solid black;
    }
    .artice{
        height: 500px;
        margin: 15px auto;
        border: 2px solid black;
      /*  padding-left: 250px;
        padding-right: 200px;*/
    }


    .artice .left{
        background-color: paleturquoise;
        float: left;
        width: 250px;
        height: 500px;
       margin-left: -100%;
       /* position: relative;
        left: -250px;*/
    }


    .artice .right{
        background-color: #ff7d8e;
        float: left;
        width: 200px;
        height: 500px;
        margin-left: -200px;
      /*  position: relative;
        right: -200px*/
    }
    .artice .middle{
        background-color: pink;
        float: left;
        width: 100%;
        height: 500px;
    }
    .inner{
        margin-left: 250px;
        margin-right: 200px;
    }
</style>
<body>
<div class ="header">
    <h3>This is Top</h3>
</div>
<div class="artice">
    <div class="middle">
        <div class="inner">
            <h3>This is Main</h3>
        </div>


    </div>
    <div class="left">
        <h3>This is left</h3>
    </div>


    <div class="right">
        <h3>This is right</h3>
    </div>
</div>
<div class="footer">
    <h3> This is L's page</h3>
</div>
</body>
</html>

观察可以发现,圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,也就是三栏全部向左float浮动,但左右两栏各加上一个负边距让其跟中间的DIV并排,以形成三栏布局。
而他们的不同之处就在于“如何让中间栏的内容不被遮挡”
圣杯布局,将中间DIV设置了左右padding-left和padding-right,将左右两个DIV用相对布局position:relative并分别配合left和right属性,留出左右两栏的位置,移动后不遮挡中间DIV
双飞翼布局,直接在中间DIV内部创建子DIV用于放置内容,在该子DIV里用margin-left和margin-right为左右两栏DIV留出位置,而省去了relative属性。
简单总结,双飞翼布局之所以比圣杯布局更为简单,是因为比他多用一个DIV去承载内容,而忽略到relative,在代码优化方面更为突出一点。