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

CSS经典布局之圣杯布局、双飞翼布局_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:38:13

原创

2091人浏览过

当我们在用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，在代码优化方面更为突出一点。