css布局是css中重要的一部分，下面根据不同场景罗列一些常用的css布局方案，包括垂直水平居中，单列，两列，三列，多列布局以及业务中用到较特殊的一些布局。通过系统地梳理各种布局方案，一来让自己加深对盒模型，postion，float，margin等属性的理解，二来也方便自己能够灵活地根据不同的业务场景选取合适的布局方案。
水平垂直居中
水平居中
从元素是行内元素还是块级元素和是否定宽两个维度，采取不同的布局方式
htm结构
- 行内元素: 父元素设为
text-aligin:center - 块级元素&&定宽: 子元素设置
margin: 0 auto - 块级元素&&未定宽: 将块级元素转为行内元素处理
display: inline, 父元素text-aligin: center
垂直居中
单行文本：
多行文本:
水平垂直居中
场景：不定宽高元素垂直居中
display:table-cell && vertical-align布局方案
dispaly: absolute&& transfrom布局方案
flex布局方案
单列布局
常用两种场景：
- header、content、footer定宽，当浏览器宽度缩小低于其最大宽度时，宽度自适应
- header、footer宽度与浏览器宽度一致，content以及header和footer里的内容定宽居中
第一种场景布局
第二种场景布局
两列布局&&三列布局
场景：
- 两列布局：一侧固定，一侧自适应
- 三列布局：左右两侧固定，中间自适应
浮动布局（float && margin）
两列布局
以左边定宽，右边自适应为例，反之亦然
三列布局
绝对定位法(postion && 负margin)
两列布局
三列布局
圣杯布局（float && 负margin && padding && position)
两列布局
三列布局
双飞翼布局(float && 负margin && margin)
两列布局
三列布局
圣杯布局和双飞翼是前端实现三栏布局中比较经典的两种布局方案，其中，圣杯布局源于2006年发在a list part上的这篇文章：In Search of the Holy Grail · An A List Apart Article，圣杯是西方表达“渴求之物”的意思。双飞翼源自淘宝UED，是一种页面的形象的表达。两者的区别主要是在解决”中间栏div内容不被遮挡“问题的思路不一样：
- 圣杯布局为了使中间div内容不被遮挡，将中间div设置padding-left和padding-right，然后将左右两个div用position: relative配合right和left属性设置，使得左右两栏div不遮挡中间div。
- 双飞翼布局为了中间div内容不被遮挡，在中间div内部创建子div用于放置内容，并在该子div里通过margin-left和margin-right为左右两栏div留出位置。
flex布局
两列&&三列共五种布局
多列布局
场景：各列均分宽度排列布局
float布局
display: inline-block布局
注意:这样写html结构是为了解决inline-block元素间间距的问题
column-count布局column-count是CSS3的属性，在PC端只支持IE10以上，可适用于移动端
其他布局
相册按比例自适应布局
总结
传统的布局方法基于盒模型，依赖display，postion，float等属性进行布局，逻辑相对复杂，而flex布局提供了一套简便、完整、响应式的布局方案，简洁通用，应用flex布局将成为以后css布局的趋势，因此，学好flex布局势在必行，后续将整理一篇有关深入理解flex布局的blog。
