一、引子
最近学了些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低版本上的留白问题，双飞翼布局解决了！！
先写到这里吧，后期完善，再行补充