经典布局 ---- 双飞翼-CSDN博客

一、引子　　

　　最近学了些js框架，小有充实感，又深知如此节奏的前提需得基础扎实，于是回头想将原生CSS和Javascript回顾总结一番，先从CSS起，能集中它的就在基础的布局上，便查阅了相关资料，将布局相关的点整理了一下，前后捋顺，遂有了如下的文章。

　　为了满足页面多列布局的需要，早期人们多用table布局，但渐渐人们发现这种布局的劣势，就是要等页面加载完才能渲染，而且table写起来代码较大，样式也不要控制，于是人们寻求CSS+HTML的方式（但也不能说table就弃用了，在展现表格的时候table还是很方便的），下面我们要聊的就是布局中经常用到的中间自适应且先渲染到页面，左右定宽的样式，提到这个布局，便不得不说实现其布局的两种经典写法----圣杯布局和双飞翼布局，本文在第一种的基础上来展现第二种的好处。

二、圣杯布局和双飞翼布局

　　圣杯布局是一种常见的网页布局，它可由现有的技术来实现，但无一没有缺点，这种写法源于西方，由于找到一种最有效的实现方法就像寻找难以捉摸的圣杯一样，这种布局的叫法也因此而得名，代码如下：

<style>
    *{
        margin:0;
        padding:0;
    }
    body{
        min-width: 700px;
    }
    .container{
        overflow: hidden;
        padding:0 220px 0 200px;
    }
    .main,.left,.right{
        min-height: 130px;
        word-break: break-all;
        position: relative;
        float: left;
    }
    .header,.footer{
        border:1px solid #333;
        background-color: #ccc;
        text-align: center;
    }
    .main{
        background: #00f;
        width:100%;
    }
    .left{
        background: #ff0;
        width:200px;
        margin-left: -100%;
        left:-200px;
    }
    .right{
        background: #0f0;
        width:220px;
        margin-right:-220px;
    }
    .footer{
        clear: both;
    }
</style>
</head>
<body>
    <div class="header">
        <h4>header</h4>
    </div>
    <div class="container">
        <div class="main">
            <h4>main</h4>
            <p>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
        </div>
        <div class="left">
            <h4>left</h4>
            <p>llllllllllllllllllllllllllllllllllllllllllllllllllll</p>
        </div>
        <div class="right">
            <h4>right</h4>
            <p>rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</p>
        </div>
    </div>
    <div class="footer">
        <h4>footer
        </h4>
    </div>
</body>

细节分析如下：

首先网页的基本材料先排好：头、体、尾

代码：

<style>
    *{
        margin:0;
        padding:0;
    }
    body{
        min-height: 700px;
    }
    .main,.left,.right{
        min-height: 130px;
        float: left
    }
    .header,.footer{
        border:1px solid #333;
        background-color: #ccc;
        text-align: center;
    }
    .main{
        background: #00f;
        width:100%;
    }
    .left{
        background: #ff0;
        width:200px;
    }
    .right{
        background: #0f0;
        width:200px;
    }
</style>
</head>
<body>
    <div class="header">
        <h4>header</h4>
    </div>
    <div class="container">
        <div class="main">
            <h4>main</h4>
            <p>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
        </div>
        <div class="left">
            <h4>left</h4>
            <p>llllllllllllllllllllllllllllllllllllllllllllllllllll</p>
        </div>
        <div class="right">
            <h4>right</h4>
            <p>rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</p>
        </div>
    </div>
    <div class="footer">
        <h4>footer
        </h4>
    </div>
</body>

用了浮动使其浮起来，用了浮动，为了进一步的位置调试，用了相对定位，为了使.main自适应设置了width:100%;这引起.left和.right掉了下来，下面做的对之完善：

1、让.left挪到左边：.left加上margin-left:-100%;这使得.left覆盖了.main的左侧

2、把避免覆盖.left,也为避免可能覆盖.right,给大容器.container加padding:0 220px 0 200px;这又引起.left向右偏移了200px;

3、.left向左移，给.left加left:-200px;同理.right左移，margin-left:-220px;

示意图如下：

其实你若是把里面的内容一行行写，会清楚的看到，在ie低版本上main和right的下面会有留白，这也是用了相对定位的坏处，圣杯布局至此结束!

　　下面我们来看看双飞翼布局，它是一种灵活的布局，始于淘宝UED。把三栏比作鸟的话，.main就是鸟的身体，.left和.right就是鸟的左右翅膀，这个布局实现的思路是，先把最重要的身体部分放好，最后再将翅膀移动到适当的地方，是对圣杯布局的一种改良。

　　代码如下：

<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    body{
        min-height: 700px;
    }
    .main,.left,.right{
        word-break: break-all;
        min-height: 130px;
        float: left;
    }
    .header,.footer{
        border:1px solid #333;
        background-color: #ccc;
        text-align: center;
    }
    .main{
        background: #00f;
        width:100%;
    }
    .mainCon{
        margin:0 220px 0 200px
    }
    .left{
        background: #ff0;
        width:200px;
        margin-left: -100%;
    }
    .right{
        background: #0f0;
        width:220px;
        margin-left:-220px;
    }
</style>
</head>
<body>
<div class="header">
        <h4>header</h4>
    </div>
    <div class="container">
        <div class="main">
            <div class="mainCon">
                <h4>main</h4>
                <p>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
            </div>
            
        </div>
        <div class="left">
            <h4>left</h4>
            <p>llllllllllllllllllllllllllllllllllllllllllllllllllll</p>
        </div>
        <div class="right">
            <h4>right</h4>
            <p>rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</p>
        </div>
    </div>
    <div class="footer">
        <h4>footer
        </h4>
    </div>
</body>

分析如下：

　　基础资料跟圣杯布局同，暂不赘述，双飞翼也用到了浮动，但它没用定位，而在第2步的时候没给container加padding，而是给main加了个内层，你可以随意给这个内层加class,笔者给它加了.mainCon，然后给.mainCon加margin:0 220px 0 200px;其他的步奏完全一样。

　　虽然改动的不多，但你看很清楚的发现，圣杯布局在ie低版本上的留白问题，双飞翼布局解决了！！

　　先写到这里吧，后期完善，再行补充

转载于:https://www.cnblogs.com/fengxiaoqing/p/6434562.html