CSS布局整理

    目录
    1. 常用居中方法
    （1）水平居中
    （2）垂直居中
    2. 单列布局
    3. 二列&三列布局
    （1）float+margin
    （2）position+margin
    （3）圣杯布局（float+负margin）
    （4）双飞翼布局（float+负margin）
    （5）flex布局
    4. 总结
    1.常用居中方法
    居中在布局中很常见，我们假设DOM文档结构如下，子元素要在父元素中居中：
    <div class="parent">
    <div class="child"></div>
    </div>
    水平居中
    子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。
    子元素为
    行内元素：对父元素设置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:absolute 并设置top、bottom为0，父元素要设置定位为static以外的值，margin:auto;
    通用方案: flex布局，给父元素设置{display:flex; align-items:center;}。
    2.单列布局
    特征：定宽、水平居中
    常见的单列布局有两种：
    （1）一种是header、content、footer宽度都相同，其一般不会占满浏览器的最宽宽度，但当浏览器宽度缩小低于其最大宽度时，宽度会自适应。
    （2）一种是header、footer宽度为浏览器宽度，但content以及header和footer里的内容却不会占满浏览器宽度。
    对于第一种，对header、content、footer统一设置width或max-width，并通过margin:auto实现居中。

    DOM文档:

  北京开眼角手术多少钱http://www.dyjjkfq.cn/

    <div class="layout">
    <div id="header">头部</div>
    <div id="content">内容</div>
    <div id="footer">尾部</div>
    </div>
    CSS清单:
    .layout{
    /*   width: 960px; *//*设置width当浏览器窗口宽度小于960px时，单列布局不会自适应。*/
    max-width: 960px;
    margin: 0 auto;
    }
    对于第二种，header、footer的内容宽度为100%，但header、footer的内容区以及content统一设置width 或 max-width，并通过margin:auto实现居中。
    DOM文档:
    <div id="header">
    <div class="layout">头部</div>
    </div>
    <div id="content" class="layout">内容</div>
    <div id="footer">
    <div class="layout">尾部</div>
    </div>
    CSS清单:
    .layout{
    /*   width: 960px; *//*设置width当浏览器窗口宽度小于960px时，单列布局不会自适应。*/
    max-width: 960px;
    margin: 0 auto;
    }