一、引子　　

　　最近学了些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. 【转】图片缓存之内存缓存技术LruCache、软引用 比较

    每当碰到一些大图片的时候,我们如果不对图片进行处理就会报OOM异常,这个问题曾经让我觉得很烦恼,后来终于得到了解决,那么现在就让我和大家一起分享一下吧.这篇博文要讲的图片缓存机制,我接触到的有两钟,一 ...

  2. IM 融云 之 列表及封装

    // // ChatListIMViewController.m // testRongCloudIM // // Created by WoodGao on 16/1/8. // Copyright ...

  3. Mysql 多列形成主键（复合主键 ）

    什么是数据表的复合主键 所谓的复合主键 就是指你表的主键含有一个以上的字段组成 比如 create table test (    name varchar(19),    id number,    ...

  4. 会话Cookie及session的关系(Cookie & Session)

    会话Cookie及session的关系(Cookie & Session) 在通常的使用中,我们只知道session信息是存放在服务器端,而cookie是存放在客户端.但服务器如何使用sess ...

  5. 解决Apache的错误日志巨大的问题以及关闭Apache web日志记录

    调整错误日志的级别 这几天 apache错误日志巨大 莫名其妙的30G  而且 很多都是那种页面不存在的  网站太多了  死链接相应的也很多于是把错误警告调低了 因为写日志会给系统带来很大的损耗.关闭 ...

  6. Angular - - filter 过滤器

    Filter Ng里的过滤器. currency:把一个数字格式化成货币模式(如$1,234.56).当没有提供任何货币符号时,默认使用当前区域的符号. 使用: HTML:{{ currency_ex ...

  7. Hybird应用开发实践（一）使用原生/cordova混合项目

    最近准备尝试hybird开发原生应用,因为公司的项目本来就是原生开发的,所以准备选择cordova作为webview嵌入原生项目的开发方式.这里就以mac上整合ios项目为例. 1. 创建cordov ...

  8. The MySQL server is running with the --skip-grant-tables option so it cannot execute this statement

    skip-grant-tables下 GRANT ALL PRIVILEGES ON *.* TO helei IDENTIFIED BY 'MANAGER' WITH GRANT OPTION; 执 ...

  9. 介绍一个开源的在线管理SQLServer的小工具--SQLEntMan

    近来有许多人问起SQL在线管理的问题,遂将以前用过的一个开源SQL 在线管理工具修改了一下,并分享. 看下效果图: 原项目的地址:http://sourceforge.net/projects/asp ...

  10. MyBatis 延迟加载

    在sqlMapConfig中进行设置 <configuration> <settings> <!--延迟加载的总开关--> <setting name=&qu ...