前端佈局革命史

任何事情的發生都有他的演化過程，就好比百度的首頁來講。

遠古時代

記不清最初的CSS佈局發生在何時，當時的網站幾乎都是標題加文章，這給表格佈局帶來了很大的方便，一個表格加幾個單元格輕鬆實現佈局，不用考慮塊元素的定位，而且能夠輕鬆實現列等高佈局，這也是表格佈局的最大優勢。可是隨着互聯網的發展，一個簡單的網頁逐漸變爲web應用，網頁效果也變的豐富多彩，因而進入了下一個時代。

石器時代

這個時代開發者開始實用div佈局，它簡單易用，拋卻了table標籤中元素在各類瀏覽器你下的不兼容，並且能夠配合css在頁面中呈現不一樣的定位和效果。下面就是當下比較流行的2種佈局：金盃佈局和雙飛燕佈局。

1.金盃佈局

金盃佈局是典型的三列布局

<div class=「container」>
        <section class=「main」></section>
        <section class=「sub」></section>
        <section class=「aside」></section>
</div>

它的關鍵技術是先爲container提供左右外邊距，而後利用sub和aside的margin-left設置爲負值來填充container的左右外邊距。

 

#contain{
   float: left;
   width: 100%;
   background-color: #eee;
}
#main{
  background:#eee;
  margin:0 100px;
}
#sub{
  float: left;
  width: 100px;
  margin-left: -100%;
  background-color: #ddd;
}
#silde{
  float: left;
  width: 100px;
  margin-left: -100px;
  background-color: #ccc;
}

2.雙飛燕佈局

這種佈局起始於淘寶的前端團隊，因爲三列布局的核心是解決main部分的浮動問題，因此，在雙飛燕佈局中加入了一個div-warp層，代碼以下

<div class=「main-wrap」>
        <section class=「main」></section>
</div>
<section class=「sub」></section>
<section class=「extra」></section>

.main-wrap {
    float: left;
    width: 100%;
    background-color: #eee;
}
.main {
    margin: 0 200px;
}
.sub{
  float: left;
  width: 100px;
  margin-left: -100%;
  background-color: #ddd;
}
.extra{
  float: left;
  width: 100px;
  margin-left: -100px;
  background-color: #ccc;
}

然而雙飛燕模式添加了無用的元素標籤。

大航海時代

1.柵格佈局

前端的技術突飛猛進，各類前端，當今比較火的一個前端框架就是bootstrap，它最著名的一點就是良好的柵格系統，開發者能夠根據本身的需求建立多列，任意寬度的佈局系統。

而我國的妹子UI也借鑑了這一優勢。

2.css3的flex屬性

因爲列式佈局的廣泛化，這一規範也逐漸被歸入標準，css3的flex佈局就是其中之一。

新時代

HTML5和CSS3的逐漸完善，現在的互聯網中流行一種fullpage的絢麗佈局，這種佈局加上css3的動畫效果給前端設計又開啓了一個時代。