一、引子
最近學了些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低版本上的留白問題，雙飛翼布局解決了！！
先寫到這里吧，后期完善，再行補充