圣杯布局
两边固定宽度，中间自适应
1. 子元素都左浮动，父元素 padding 留出空间
2. 中间元素宽度100%
3. 左右元素相对定位 配合负边距
缺点: 如果center部分宽度效于left部分，会造成布局塌陷，旁边两列不能自动填充高度
left
right
双飞翼布局
圣杯布局的优化，实现内容和布局的分离
1.在圣杯布局的基础上
2.设定 parent 元素的最小宽度
3.center 元素再增加一个子元素来撑开双边
优点: 避免使用了无用的定位，由于父元素使用了 overflow 三个部分都能撑开高度
缺点: 增加了一个 inner 层
left
right
left
表格布局
1.父元素 diplay:table
2.子元素 display: table-cell
3.左右两边设置宽度，中间元素不设置宽度
优点: 实现等高布局，兼容性很好,如果需要兼容flex不能用的情况，优先考虑此种实现
缺点: 无法设置栏边距，等高布局无法改变，对SEO不友好
right
left
flexbox布局
1.父元素 diplay:flex
2.左右两边 设置宽度
3.中间元素 flex: 1
4.父元素 align-items: stretch(填满)/start/end/center;控制是否填满等高
优点：书写方便简洁，可以等高也可以不等高，基本就是一个属性设置的区别，移动端常用
缺点：PC端IE10才开始支持
right
left
网格布局
1.父元素diplay:grid
2.父元素设置 grid-template-columns
3.align-items: stretch(填满)/start/end/center;控制是否填满等高
优点：布局强大，二维布局能力出色，可以玩出很多骚操作。未来最流弊的布局方案了
缺点：ie 谷歌一条街，打听打听谁是爹
right