布局是CSS中一個重要部分，下面總結了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的盒模型布局和比較新的flex布局實現）。

　　一、居中方式　　

水平居中

水平居中對於子元素為行內元素還是塊狀元素，寬度一定還是寬度未定，采取的布局方案是不同。

行內元素：對父元素設置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;}。

二、單列布局　

特征：定寬、水平居中

常見的單列布局有兩種：

· 一種是header、content、footer寬度都相同，其一般不會占滿瀏覽器的最寬寬度，但當瀏覽器寬度縮小低於其最大寬度時，寬度會自適應。

· 一種是header、footer寬度為瀏覽器寬度，但content以及header和footer裏的內容卻不會占滿瀏覽器寬度。

對於第一種，對header、content、footer統一設置width或max-width，並通過margin:auto實現居中。

三、實現多列布局的幾種方式

實現多列布局的方式有：

1. 使用BFC隱藏屬性
2. float + margin
3. absolute + margin
4. 聖杯布局
5. 雙飛翼布局
6. flex布局

　　下面所舉例子（以三欄布局為例）的DOM文檔內容如下：

    <!-- 三欄布局 -->
    <!-- 這裏要註意DOM的書寫順序問題。 -->
    <aside class="aside1"></aside>
    <aside class="aside2"></aside>
    <article class="main"></article>

　　1、使用BFC隱藏屬性

　　　　在對需要自適應的元素BFC化，可以實現兩列或三列布局

　　三列布局方式示例如下：

         /*固定寬度*/
        .aside1 {
          float: left;
　　　　　　/*給浮動元素設置margin-right使兩欄之間有間隙*/
          margin-right: 10px;
          width: 100px;
          height: 100vh;
          background-color: lightsalmon;
        }
         /*固定寬度*/
        .aside2 {
          float: right;
          margin-left: 10px;
          width: 100px;
          height: 100vh;
          background-color: lightsalmon;
        }
         /*BFC化自適應寬度*/
        .main {
          overflow: hidden;
          height: 100vh;
          background-color: lightpink;
        }

　　使用BFC實現三欄布局時需要註意的是DOM的書寫順序問題。如果將aside2與article交換位置，那麽aside2元素會被擠到article元素之下，無法實現三欄自適應布局。缺點：寬度小於aside寬度時，由於寬度不足的原因，三欄布局時會使元素出現掉下去的現象。

　　2、float + margin

在自適應寬度的元素上設置margin值，margin的值大於或等於固定寬度的值即可。實現思路與使用BFC隱藏屬性差不多。缺點：寬度小於aside寬度時，由於寬度不足的原因，三欄布局時會使元素出現掉下去的現象。

CSS樣式：

    .aside1 {
  float: left;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}

.main {
  margin-left: 110px;
  margin-right: 110px;
  height: 100vh;
  background-color: lightpink;
}

.aside2 {
  float: right;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}

3、absolute + margin

使用position: absolute時，DOM元素順序並不重要。給左右兩欄定寬，主內容自適應寬度。缺點：側邊欄元素脫離文檔流。優點：article元素可先加載。

CSS樣式：

.aside1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}
.aside2 {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}
.main {
  margin: 0 110px;
  height: 100vh;
  background-color: lightpink;
}

4、聖杯布局

　　聖杯布局叫float + 負margin + relative更容易理解一些，它的實現思路如下：

1. 兩欄和自適應元素都設置同一方向的浮動(如float: left)
2. 父元素設置左右padding為左右邊欄的寬度。
3. 自適應元素設置寬度為100%
4. 左邊欄margin-left為負100%，再設置relative，最後通過left屬性偏移負的自身寬度。
5. 右邊欄margin-left為負自身寬度，再設置relative，最後通過right屬性偏移負的自身寬度。

　　而且，該布局方式與其他布局方式有一個明顯的不同：它需要有一個父元素。缺點：寬度小於兩欄寬度時，元素會因為寬度不足而掉下去。

　　5、雙飛翼布局　

雙飛翼布局與聖杯布局相似。只不過少了relative與left, right的步驟和共同父元素，主內容元素多了層父元素。實現思路如下：

1. 1. 兩欄和自適應元素都設置同一方向的浮動(如float: left)
   2. main元素設置左右margin值，值為左右兩欄的寬度。main父元素設置寬度為100%
   3. 左邊欄margin-left為負100%
   4. 右邊欄margin-left為負自身寬度

　　6、flex布局

flex布局還可以稱之為彈性布局，它可以簡便、完整、響應式地實現各種頁面布局。而且已經得到所有主流瀏覽器的支持，我們可以放心大膽的使用。

彈性布局的使用方式如下：

① 給父容器添加display: flex/inline-flex;屬性，即可使容器內容采用彈性布局顯示，而不遵循常規文檔流的顯示方式；

② 容器添加彈性布局後，僅僅是容器內容采用彈性布局，而容器自身在文檔流中的定位方式依然遵循常規文檔流；

③ display:flex; 容器添加彈性布局後，顯示為塊級元素；

display:inline-flex; 容器添加彈性布局後，顯示為行級元素；

④ 設為 Flex布局後，子元素的float、clear和vertical-align屬性將失效。但是position屬性，依然生效。

　　雖然 在需要縮放，對齊和重新排序元素的情況下使用flex布局非常方便，但以下情況應該盡量避免使用 Flex 布局：

　　1、整體頁面布局

　　2、完全支持舊瀏覽器的網站

css常見布局方式