css常見佈局方式

CSS常見佈局方式

如下總結一下CSS中常見的佈局方式。本人才疏學淺，若有錯誤，請留言指出。

如需轉載，請註明出處：CSS常見佈局方式

目錄：

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

以上5種方式均可以實現兩欄或三欄佈局

若是對BFC(塊級格式化上下文)概念不熟悉的朋友，能夠先看看這篇文章。BFC深刻理解

使用BFC隱藏屬性

在對須要自適應的元素BFC化，能夠實現兩欄或三欄佈局

兩欄佈局
<aside class="aside1"></aside>
<article class="main"></article>

// 左邊固定寬度，右邊自適應
.aside1 {
  float: left;
  margin-right: 10px;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}
.main {
  overflow: hidden;
  height: 100vh;
  background-color: lightpink;
}

若是要讓兩欄之間有空隙，能夠給浮動元素設置margin-right值，也能夠給自適應的主內容設置margin-left值。但設置margin-left時，須要考慮到aside的寬度。實現三欄佈局也是如此，給浮動元素設置margin值會方便一些。

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

// 固定寬度
.aside1 {
  float: left;
  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寬度時，因爲寬度不足的緣由，三欄佈局時會使元素出現掉下去的現象。

float + margin

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

兩欄佈局
<aside class="aside1"></aside>
<article class="main"></article>

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

三欄佈局
// 注意，DOM順序不可改變
<aside class="aside1"></aside>
<aside class="aside2"></aside>
<article class="main"></article>

.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;
}

absolute + margin

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

.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;
}

使用absolute + margin實現兩欄佈局時，只須要刪除對應的欄目便可。

聖盃佈局

聖盃佈局，爲何叫聖盃佈局...其實我以爲很奇怪，倒不如叫float + 負margin + relative更貼切一下。實現思路以下

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

// 與其餘佈局不一樣，此佈局須要父元素
<div class="parent">
  <article class="main"></article>
  <aside class="aside1"></aside>
  <aside class="aside2"></aside>
</div>

.parent {
  padding: 0 100px;
  // 左右邊欄的寬度，可適當縮小以增長每欄之間的距離
}
.main {
  float: left;
  width: 100%;
  height: 100vh;
  background-color: lightpink;
}
.aside1 {
  float: left;
  position: relative;
  left: -100px;
  margin-left: -100%;
  width: 100px;
  height: 100vh;
  background-color: lightseagreen;
}
.aside2 {
  float: left;
  margin-left: -100px;
  position: relative;
  right: -100px;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}

固然了，缺點也是有的。就是在寬度小於兩欄寬度時，元素會由於寬度不足而掉下去。

雙飛翼佈局

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

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

<div class="main-wrap">
  <article class="main"></article>
</div>
<aside class="aside1"></aside>
<aside class="aside2"></aside>

// 如下包含部分sass語法
.main {
  margin: 0 100px;
  height: 100vh;
  background-color: lightpink;
  &-wrap {
    float: left;
    width: 100%;
  }
}
.aside1 {
  float: left;
  width: 100px;
  margin-left: -100%;
  height: 100vh;
  background-color: lightseagreen;
}
.aside2 {
  float: left;
  width: 100px;
  margin-left: -100px;
  height: 100vh;
  background-color: lightsalmon;
}

flex佈局

flex佈局新出現的概念較多，有興趣的朋友能夠到如下博客看更爲詳細的教程。使用flex來實現佈局，我我的認爲是最簡單的方式。在移動端上，Android 4.4+以上、IOS 7.0+以上都支持flex佈局。而在PC端上，使用flex佈局時仍是須要考慮一下的，由於到目前爲止，IE11仍然只有部分屬性支持。

Flex 佈局教程：語法篇