CSS布局

参考知乎：在这做个笔记，供自己学习总结
(https://zhuanlan.zhihu.com/p/25565751)

1. 常见居中方法

   1. 水平居中: 根据子元素是行内元素还是块状元素，是否定宽，采取的布局不一样；常见的如下：
      行内元素：对父元素设置text-align:center;
      块状元素(定宽)：设置左右margin：auto；
      块状元素(不定宽): 先设置子元素：display：inline；在对父元素设置：text-align：center；
      通用方案: flex布局，对父元素设置display:flex; justify-content:center;

   2. 垂直居中:对于子元素是单行内联文本、多行内联文本以及块状元素的方案不同，常见如下：
      父元素一定：
      子元素为单行内联文本：设置父元素height=行高line-height
      子元素为多行内联文本：设置父元素display：table-cell/inline-block，再设置vertical-align：middle/center；
      子元素为块状元素：设置子元素position：absolute，并且设置top，bottom=0，父元素应设置定位position：fixed/absolute/relative，并且设置margin：auto；
      通用方案：flex布局，给父元素设置{display:flex; align-items:center;}

2. 单列布局
   特征：定宽，水平居中

   1. header，content，footer宽度相同，其一般不会占满浏览器的最宽宽度，但当浏览器宽度缩小低于其最大宽度时，宽度会自适应。
      设置：对header，content，footer统一设置width/max-width，并通过margin：auto实现居中。
   2. header，footer宽度为浏览器宽度，但content以及header和footer的内容却不会占满浏览器宽度。
      设置：header、footer的内容宽度为100%，但header、footer的内容区以及content统一设置width 或 max-width，并通过margin:auto实现居中。

3. 二列布局/三列布局
   二列布局的特征是侧栏固定宽度，主栏自适应宽度。
   三列布局的特征是两侧两列固定宽度，中间列自适应宽度

    1. float+margin
   

   原理：设置两个侧栏分别向左向右浮动，中间列通过外边距给两个侧栏腾出空间，中间列的宽度根据浏览器窗口自适应。
   布局步骤：
   对两边侧栏分别设置宽度，并对左侧栏添加左浮动，对右侧栏添加有浮动；对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。

    2. position+margin
   

   **原理：**通过绝对定位将两个侧栏固定，同样通过外边距给两个侧栏腾出空间，中间列自适应
   布局步骤：
   对两边侧栏分别设置宽度，设置定位方式为绝对定位；
   设置两侧栏的top值都为0，设置左侧栏的left值为0， 右侧栏的right值为0；
   对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。

    3.  圣杯布局(float + 负margin)
   

   原理：
   主面板设置宽度为100%，主面板与两个侧栏都设置浮动，常见为左浮动，这时两个侧栏会被主面板挤下去。通过负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。为了避免侧栏遮挡主面板内容，在外层设置左右padding值为左右侧栏的宽度，给侧栏腾出空间，此时主面板的宽度减小。由于侧栏的负margin都是相对主面板的，两个侧栏并不会像我们理想中的停靠在左右两边，而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局，调整两个侧栏到相应的位置。
   步骤：
   三者都设置向左浮动。
   设置main宽度为100%，设置两侧栏的宽度。
   设置 负边距，sub左侧设置负左边距为100%，extra右侧设置负左边距为负的自身宽度。
   设置main的padding值给左右两个子面板留出空间。
   设置两个子面板为相对定位，sub的left值为负的sub宽度，extra的right值为负的extra宽度

    4. 双飞翼布局(float + 负margin )
   

传统的布局方法基于盒状模型，依赖 display属性 + position属性 + float属性，相对复杂，但常用。
flex布局去学习一下是如何简洁操作的。