css布局之圣杯布局

三列布局中，左右两列定宽，中间一列自适应是比较常用的一种布局方式。代表性的布局方式有圣杯布局和双飞翼布局。

圣杯布局

下面这些布局都是通过浮动来实现 的，但常常只将三列布局中，左右两列定宽，中间一列自使用看成是圣杯布局。我认为这种观点其实有点狭隘。

单从圣杯布局这个名字来讲，也不是单指三列布局，圣杯并不是三列布局的形象表示，在西方圣杯是指渴求之物。在网页展现时我们渴求之物当然是主内容区域的信息。

圣杯布局就是：将主内容区域首先加载，其次再加载侧边的内容。

先来理解理解一下圣杯布局是如何实现的：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局的几种实现方式</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        body{
            min-width: 600px;
            color:#fff;
        }

        .header,
        .footer{
            text-align: center;
            background-color: #ab96c5;
        }

        .layout1,
        .layout2,
        .layout3,
        .layout4,
        .layout5{
            margin:5px;
            overflow: hidden;
        }

        .content,
        .aside{
            min-height: 40px;
            text-align:center;
        }

        .content{
            /*position: relative;*/
            background-color: #793d56;
            width: 100%;
            
        }

        .aside{
            position: relative;
            background-color: #bb1c33;
            width:200px;
        }

        .layout1{
            padding-left: 200px;
        }

        #aside1,
        #content1{
            float: left;
        }

        #aside1{
            margin-left: -100%;
            left: -200px;

        }

        #content2,
        #aside2{
            float:left;
        }
        
        .layout2{
            padding-right: 200px;
        }

        #aside2{
            margin-left: -200px;
            right: -200px;
        }

        .layout3{
            padding-left: 200px;
            padding-right: 200px;
        }
        
        #content3,
        #aside3-left,
        #aside3-right{
            float:left;
        }

        #aside3-left{
            margin-left: -100%;
            left: -200px;
        }
        
        #aside3-right{
            margin-left: -200px;
            right: -200px;
        }
        
        .layout4{
            padding-left: 400px;
            
        }

        #content4,
        #aside4-left1,
        #aside4-left2{
            float: left;
        }

        #aside4-left1{
            margin-left: -100%;
            left: -400px;
        }
        
        #aside4-left2{
            margin-left:-100%;
            left: -200px;
        }

        .layout5{
            padding-right: 400px;
            
        }

        #content5,
        #aside5-right1,
        #aside5-right2{
            float: left;
        }

        #aside5-right1{
            margin-left: -200px;
            right: -200px;
        }
        
        #aside5-right2{
            margin-left:-200px;
            right: -400px;
        }

    </style>
</head>
<body>
    <div class="header">头部</div>
    <div class="layout1">
        <div class="content" id="content1">内容区域自适应</div>
        <div class="aside" id="aside1">左侧边栏固定</div>
    </div>
    <div class="layout2">
        <div class="content" id="content2">内容区域自适应</div>
        <div class="aside" id="aside2">右侧边栏固定</div>
    </div>
    <div class="layout3">
        <div class="content" id="content3">内容区域自适应</div>
        <div class="aside" id="aside3-left">左侧边栏固定</div>    
        <div class="aside" id="aside3-right">右侧边栏固定</div>
    </div>
    <div class="layout4">
        <div class="content" id="content4">内容区域自适应</div>
        <div class="aside" id="aside4-left1">左侧边栏1固定</div>
        <div class="aside" id="aside4-left2">左侧边栏2固定</div>    
    </div>
    <div class="layout5">
        <div class="content" id="content5">内容区域自适应</div>
        <div class="aside" id="aside5-right1">右侧边栏1固定</div>
        <div class="aside" id="aside5-right2">右侧边栏2固定</div>
    </div>
    <div class="footer">尾部</div>

</body>
</html>

下面分析一下具体每种情况是怎么实现的：

1. 左侧边栏固定，右侧内容区域自适应

实现代码：

        .content,
        .aside{
            min-height: 40px;
            text-align:center;
        }
        
        .layout1{
            margin:5px;
        }

        .content{
            background-color: #793d56;
            width: 100%;
            
        }

        .aside{
            position: relative;
            background-color: #bb1c33;
            width:200px;
        }

        .layout1{
            color:#fff;
            padding-left: 200px;
        }
        
        #aside1,
        #content1{
            float: left;
        }

        #aside1{
            margin-left: -100%;
            left: -200px;
        }

代码分析： 

　a.设置 aside和content的最小高度，min-height: 40px；

　b.设置 aside和content的背景，将文本颜色设置为白色，方便观察；

　c.设置给aside设置一个固定的宽度，width:200px;为了让剩下的被content充满，将它的width设置为：width: 100%;

d.让内容和侧边栏都发生左浮动（似乎什么也没有发生）；

e.设置aside1完全相等于内容区域的左外负边距，margin-left: -100%;

当设置

        #aside1{
            margin-left: -100%;
        }

时，aside1的右负边距正好为content的width即：100%；

3D效果：

 

这时，左侧边栏被移到想放置的位置了，但是发现content区域的文字被侧边栏遮挡住了，需要通过设置父元素的padding-left把内容区域拉出来：

f. 设置layout的padding-left: 200px;

 

这时，发现左侧边栏又跟着被拉出来了。需要将侧边栏移动到本来的位置：最左边。

g. 设置aside的left: -200px;

 通过设置aside1的left:-200px；相当于将aisde1相对于当前位置像右移动-200px；其实就是向左移动200px;但是发现什么也没有发生。

这是因为，aisde1不知道相对于什么位置来定位自己，需要设置定位方式：aside的position属性为position: relative；

这下左侧边栏回到了应该在的位置。

h.将文本居中：

3D效果：

 

发现这下显示正常了。

——————————————————————————————————————————————————————————————————————————————————————————————————————

 

2. 右侧边栏固定，左侧内容区域自适应

这其实和上面的左侧边栏固定，右侧内容区域自适应是一个道理，只是有些设置不一样。

        .content,
        .aside{
            min-height: 40px;
            text-align:center;
        }
        
        .layout2{
            margin:5px;
        }

        .content{
            background-color: #793d56;
            width: 100%;
            
        }

        .aside{
            position: relative;
            background-color: #bb1c33;
            width:200px;
        }

        .layout2{
            padding-right: 200px;
            color: #fff;
        }

        #content2,
        #aside2{
            float:left;
        }
        
        #aside2{
            margin-left: -200px;
            right: -200px;

        }

3. 两侧边栏固定，中间栏自适应。

 

        .content,
        .aside{
            min-height: 40px;
            text-align:center;
        }
        
        .content{
            background-color: #793d56;
            width: 100%;
            
        }

        .aside{
            position: relative;
            background-color: #bb1c33;
            width:200px;
        }
        .layout3{
            padding-left: 200px;
            padding-right: 200px;
            color: #fff;
        }

        #content3,
        #aside3-left,
        #aside3-right{
            float:left;
        }

        #aside3-left{
            margin-left: -100%;
            left: -200px;
        }
        
        #aside3-right{
            margin-left: -200px;
            right: -200px;
        }

看一下具体的实现：

a. 首先让左右侧栏和中栏内容栏即三个div都左浮动：

b. 先把左侧边栏拉上去

向上面设置1时一样，设置#aside3-left的margin-left: -100%;

3D效果：

 这时，发现内容左侧的文本被遮挡，通过设置父元素layout3的padding-left可以将content内容拉出来：

c. 设置layout3的padding-left：200px;

 

但是左侧边栏也跟着跑过来了，需要将左侧边栏向左移动。

d.设置#aside3-left的left：-200px;即相对于当前位置向左移动200px;

缺少相对定位，没有效果。

e. 设置#aside3-left的position：relative；

 

左侧边栏设置成功。接下啦拉动右侧边栏。

f.将右侧边栏拉拉上来：

设置右侧边栏#aside3-right的margin-left: -200px;

此时内容区域有一部分被右侧边栏遮盖住了：（点击内容区域，发现右侧边栏也会被选定）

 

g.但同时跟左侧边栏一样，应该把content区域从左侧边栏拉出来：

h.设置右侧边栏为相对定位，将右侧边栏向右移动，放回原位。

得到最终想要的结果。

 后面的两种布局方式是一样的原理，这里就不再赘述了。

————————————————————————————————————————————————————————————————————————————————————————————————————————

总结：

圣杯布局：用到浮动、负边距、相对定位，不添加额外标签。

首先让布局元素都浮动起来，然后将自适应区域设置为100%，再通过设置自适应元素的父元素左右内边距，将自适应区域左右压缩到合适的宽度，通过设置左右侧边栏的外负边距移动它们的位置，最后进行相对定位，并调整相对位置。

posted @ 2016-09-14 16:10  tisikcci  阅读(1691)  评论(1)  编辑  收藏  举报