一、引子　　

　　最近学了些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低版本上的留白问题，双飞翼布局解决了！！

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

中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局的更多相关文章

  1. 两种经典电商CSS布局

    圣杯布局和双飞翼布局! 两种布局功能相同,都是为了实现两端宽度固定,中间宽度自适应的三栏布局 圣杯布局: 三个区域都处于左浮动状态,并使main的宽度成父容器的100% 为两侧侧边栏添加负margin ...

  2. 利用深搜和宽搜两种算法解决TreeView控件加载文件的问题。

    利用TreeView控件加载文件,必须遍历处所有的文件和文件夹. 深搜算法用到了递归. using System; using System.Collections.Generic; using Sy ...

  3. TensorFlow笔记三：从Minist数据集出发 两种经典训练方法

    Minist数据集:MNIST_data 包含四个数据文件 一.方法一:经典方法 tf.matmul(X,w)+b import tensorflow as tf import numpy as np ...

  4. JS获取元素宽高的两种情况

    JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用     document.getElementById('xxx'). ...

  5. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  6. NEC学习 ---- 布局 -两列， 左侧定宽，右侧自适应

    CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...

  7. css实现左边定宽右边自适应的5种方法总汇

    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...

  8. NEC学习 ---- 布局 -两列， 右侧定宽，左侧自适应

    该篇必须引用初始化样式和功能性样式,样式在前篇 http://www.cnblogs.com/Zell-Dinch/p/4436054.html 中已经提及. 上篇中介绍了左侧定宽,右侧自适应的布局, ...

  9. CSS布局 两列布局之单列定宽,单列自适应布局思路

    前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...

随机推荐

  1. OI队内测试二【数论概率期望】

    版权声明:未经本人允许,擅自转载,一旦发现将严肃处理,情节严重者,将追究法律责任! 序:代码部分待更[因为在家写博客,代码保存在机房] T1: 题解:插头dp应该很好想吧,我们考虑当出现转折时我们对下 ...

  2. UOJ #192 【UR #14】 最强跳蚤

    题目链接:最强跳蚤 这道题本来不想写博客的--但是鉴于自己犯了低级错误,还是写篇博客记载一下. 一开始我的想法和题解里面的算法而比较类似,也是先分解质因数,然后用质因子是否出现偶数次来判断当前这个数是 ...

  3. Python3基础 map 与 lambda表达式配合 将指定系列元素乘2

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  4. spark 1.6 idea本地运行错误

    将spark maven更新至1.6,运行原有程序,发现以下错误: java.lang.IllegalArgumentException: System memory must be at least ...

  5. iconfont.cn阿里巴巴矢量图下载字体图标实战

    1.阿里巴巴矢量图网址:www.iconfont.cn 2.然后用新浪微博账号登录 3.输入要查找的图标相应的关键字,回车 4.滑过要找的图标,点击购物车,让图标存储到暂存架中 5.点击暂存架,存储为 ...

  6. 【bzoj3998】 TJOI2015—弦论

    http://www.lydsy.com/JudgeOnline/problem.php?id=3998 (题目链接) 题意 给出一个字符串,求它的字典序第K小的子串是什么,分情况讨论不在同一位置的相 ...

  7. IIS8中添加WCF支持几种方法小结[图文]

    方法一 最近在做Silverlight,Windows Phone应用移植到Windows 8平台,在IIS8中测试一些传统WCF服务应用,发现IIS8不支持WCF服务svc请求,后来发现IIS8缺少 ...

  8. C# 程序只能执行一次

    应用程序的主入口点. //每一个程序只能运行一个实例 bool isRun = false; System.Threading.Mutex m = new System.Threading.Mutex ...

  9. 蓝桥杯java试题《洗牌》

    问题描述 小弱T在闲暇的时候会和室友打扑克,输的人就要负责洗牌.虽然小弱T不怎么会洗牌,但是他却总是输. 渐渐地小弱T发现了一个规律:只要自己洗牌,自己就一定会输.所以小弱T认为自己洗牌不够均匀,就独 ...

  10. CodeForces 722A

    A. Broken Clock time limit per test:1 second memory limit per test:256 megabytes input:standard inpu ...