前端布局革命史

任何事情的发生都有他的演化过程，就比如百度的首页来说。

远古时代

记不清最初的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的动画效果给前端设计又开启了一个时代。