布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的盒模型布局和比较新的flex布局实现），希望能给需要的小伙伴带来一些帮助。
文章目录：
1.常用居中方法：水平居中，垂直居中，
2.单列布局
3.二列&三列布局：float+margin，position+margin，圣杯布局（float+负margin），双飞翼布局（float+负margin），flex布局
1.常用居中方法
居中在布局中很常见，我们假设DOM文档结构如下，子元素要在父元素中居中：
水平居中
子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。下面进行分析：
行内元素：对父元素设置text-align:center;
定宽块状元素: 设置左右margin值为auto;
不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;
通用方案: flex布局，对父元素设置display:flex;justify-content:center;
垂直居中
垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。
父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height
父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;
块状元素:设置子元素position:fixed（absolute），然后设置margin:auto;
通用方案: flex布局，给父元素设置{display:flex; align-items:center;}。
2.单列布局
特征：定宽、水平居中
常见的单列布局有两种：
一种是header、content、footer宽度都相同，其一般不会占满浏览器的最宽宽度，但当浏览器宽度缩小低于其最大宽度时，宽度会自适应。
一种是header、footer宽度为浏览器宽度，但content以及header和footer里的内容却不会占满浏览器宽度。
对于第一种，对header、content、footer统一设置width或max-width，并通过margin:auto实现居中。
DOM文档:
CSS清单:
对于第二种，header、footer的内容宽度为100%，但header、footer的内容区以及content统一设置max-width，并通过margin:auto实现居中。
DOM文档:
CSS清单:
- 二列&三列布局
二列布局的特征是侧栏固定宽度，主栏自适应宽度。三列布局的特征是两侧两列固定宽度，中间列自适应宽度。
之所以将二列布局和三列布局写在一起，是因为二列布局可以看做去掉一个侧栏的三列布局，其布局的思想有异曲同工之妙。对于传统的实现方法，主要讨论上图中前三种布局，经典的带有侧栏的二栏布局以及带有左右侧栏的三栏布局，对于flex布局，实现了上图的五种布局。
a. float+margin
原理说明：设置两个侧栏分别向左向右浮动，中间列通过外边距给两个侧栏腾出空间，中间列的宽度根据浏览器窗口自适应。
DOM文档:
布局步骤:
对两边侧栏分别设置宽度，并对左侧栏添加左浮动，对右侧栏添加有浮动。
对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。
CSS清单: