页面布局进化史

从事前端工作以来我是用过的页面布局方法

记得我刚从事互联网工作的时候先接触的就是table表格布局页面，当时css并没有那么的普及（也或是是我不太了解）哪个时候还是用的asp，access开发网站。当时做一个页面，要实现一个效果都是表格嵌套表格，一个背景图为了实现自适应需要把它分成三份分别放到不同的单元格当中，当时如果要做好一个比较复杂的页面需要写上好几百个表格单元格才能实现。

布局第一阶段table表格

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="20%">左</td>
    <td width="auto">右</td>
  </tr>
</table>

上边代码是通过表格实现的左右两列布局结构，表格布局优点：宽度自适应，高度左右列能做到一样高；缺点：html代码多，写起来比较复杂，结构和表现都写在一起在页面结构复杂情况下不利于代码维护。

css2中div+css实现布局

css的出现使得页面结构和样式完全分离开，页面的内容由html结构来完成，内容的展示样式就交给了css来实现。同时样式可以单独写在一个文件里html中只需要通过link引入样式文件即可，使维护变得简单。

浮动布局

是通过给元素设置左右浮动实现

<div class="box">
  <div class="left">左</div>
  <div class="right">右</div>
</div>

<style type="text/css">
  .left{float:left;width:20%;}
  .right{float:right;width:80%;}
  .box{overflow:hidden;}
</style>

从上边代码可以看出，html代码比表格布局少了很多，但是灵活性更强了，所有的样式表现都有css来完成，我们可以在不改变html结构的情况下轻松让左右结构互换位置。只需要改变浮动方向即可。但是简单的同时又出现了新的问题，那就是元素浮动的时候已经脱离了文档流使得box元素不能按照内容高度自适应，高度变成了0像素。这个时候我们就需要给他设置其他代码来解决此问题。这就是所谓的浮动后父元素高度塌陷。

定位布局

是通过给元素设置相对定位和绝对定位来实现

<div class="box">
  <div class="left">左</div>
  <div class="right">右</div>
</div>

<style type="text/css">
  .box{position:relative;}
  .left{position:absolute;left:0;top:0;width:20%;}
  .right{position:absolute;left:20%;top:0;width: 80%;}
</style>

定位布局也会造成父容器高度塌陷的情况，一般情况定位属性设置在一个元素上左边或者右边，然后让另一个默认撑开父元素

inline-block

通过inline-block可以设置宽度高度的特性，并且可以设置按照父级百分百宽度实现布局

<div class="box">
  <div class="left">左</div>
  <div class="right">右</div>
</div>

<style type="text/css">
  .box{position:relative;}
  .left{position:absolute;left:0;top:0;width:20%;}
  .right{position:absolute;left:20%;top:0;width: 80%;}
</style>

css3中的高级布局方法

flex布局

flex布局又称为弹性盒模型布局，也就是说它可以自适应宽高，并且能够轻松的实现以前无法实现或者需要很复杂才能实现的效果。flex布局写法更加简单

<div class="box">
  <div class="left">左</div>
  <div class="right">右</div>
</div>

<style type="text/css">
  .box{display:flex;}
  .left{width: 300px; flex-shrink: 0;}
  .right{flex-grow:1}
</style>

上面的简单代码就实现了一个两列布局，左边宽度300像素，右边自适应宽度，并且两边的高度永远是等高的。我们看到使用flex方法能让我们在写代码上变得少了很多。

grid布局

grid布局又称为网格布局，它是继flex布局后又一种很灵活的布局模式，flex布局只是一维的布局系统，而grid是一个二维的布局系统，它有行和列的概念，并且更灵活。

<div class="box">
  <div class="left">左</div>
  <div class="right">右</div>
</div>

<style type="text/css">
  .box{display:grid; grid-template-columns: 300px 1fr;}
</style>

从上面代码可以看到，grid布局在css代码上更加简单，只需要给父级设置属性就能轻松实现上面的两列布局

在现在的浏览器都能够很好的支持flex和grid布局，我们在开发中可以放心大胆的使用更加简单的布局方式