一、引子　　

　　最近学了些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. HDU 1255 覆盖的面积 ——（线段树+扫描线）

    又做了一题扫描线以后对节点的覆盖标记理解的更加深刻了. 代码如下: #include <stdio.h> #include <algorithm> #include <s ...

  2. IOS开发－UI学习－UIPageControl（页码控制器）的使用

    UIPageControl即页码控制器,是在翻动图片阅览时下面显示的几个小点,属性设置如下: UIPageControl *pagecontrol = [[UIPageControl alloc]in ...

  3. Oracle 事件

    Oracle 的事物 事物是设么 事物是用于高正数据的一致性,他由一组相关的dml语句组成(增加删除语句),这组语句要么全部成功要不全部失败. 如:网上转账. 1)设置保存点 Savepoint a1 ...

  4. Windows 7 Professional安装多语言包

    本文出自 "王春海的博客" 博客,请务必保留此出处http://wangchunhai.blog.51cto.com/225186/223635 下载了Windows 7 Prof ...

  5. iOS 之 UIStackView

    UIStackView是iOS9新推出的布局控件,它的出现,可以说颠覆了以往的布局方式. 问题时,如果我使用UIStackView,它能用在iOS7.8系统中吗? 我要测试一下.测试程序我放到gith ...

  6. JavaScript 模块化及 SeaJs 源码分析

    网页的结构越来越复杂,简直可以看做一个简单APP,如果还像以前那样把所有的代码都放到一个文件里面会有一些问题: 全局变量互相影响 JavaScript文件变大,影响加载速度 结构混乱.很难维护 和后端 ...

  7. Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...

  8. 在DataTable数据类型最后增加一列，列名为“Column”，内容都为“AAA”

    DataTable dt = new DataTable(); dt.Columns.Add("Column", typeof(string)); foreach (DataRow ...

  9. Linux内存管理之slab分配器

    slab分配器是什么? 参考:http://blog.csdn.net/vanbreaker/article/details/7664296 slab分配器是Linux内存管理中非常重要和复杂的一部分 ...

  10. 创建 OVS vlan101 并部署 instance - 每天5分钟玩转 OpenStack（139）

    前面我们创建了 OVS vlan100 并部署了 instance,今天继续创建 vlan101. subnet IP 地址为 172.16.101.0/24. 底层网络发生了什么变化 Neutron ...