前端中常見的布局

對於已經踏入前端這個坑多年的我來說，也沒有什么特別好的經驗要分享給大家的，所以就總結了一下這幾年工作中常用的幾種布局。

一、等寬列表布局

等寬布局我相信大家都挺常見，就比如說淘寶的商品列表，比如說如下的界面，我相信大家都挺常見。在bootstrap中可以稱之為柵格。

對於這種是我用的最多的，也是最常見的一種布局。

第一種方案：寬度不定，內容自適應寬度進行變化，使用場景，手機站居多，當然pc站也能夠使用。下面是CSS代碼

.window {
  margin: 0 auto;
  width: 600px;
  background: #ddd;
  height: 300px;
}
.row {
  display: block;
  margin-left: -15px;
  margin-right: -15px;
}
.col{
  display: block;
  float: left;
  width: 33.333333%;
  padding: 0 15px;
  box-sizing: border-box;
}
.item {
  width: 100%;
  height: 300px;
  background: yellow;
}

html代碼如下：

  <div class="window">
    <div class="row">
      <div class="col">
        <div class="item"></div>
      </div>
      <div class="col">
        <div class="item"></div>
      </div>
      <div class="col">
        <div class="item"></div>
      </div>
    </div>
  </div>

這里面的window就是我們的外圍框框，也就是要進行均分的格子，而item就是我們的每一項，千萬要記住的幾個點就是，我們的row這個class不要設置width：100%;需要設置display：block；而col這個class則需要設置box-sizing：border-box。

第二種方案：是在我們已知的外圍的寬度，和內容的項數，以及每項之間的寬度，這個我相信很多初學者會這么寫，就是我們通過測量出寬度進行排版。然后設置第一個的邊距為0，具體的css代碼如下：

.window {
  margin: 0 auto;
  width: 600px;
  background: #ddd;
  height: 300px;
}
.row {
  display: block;
  width: 100%;
}
.col{
  display: block;
  float: left;
  width: 180px;
  margin-left: 30px;
}
.row > .col:first-child {
  margin-left: 0;
}
.item {
  width: 100%;
  height: 300px;
  background: yellow;
}

html和方法一其實是一樣的，我這邊就不進行粘貼占空間了。

這樣的一種方案，適合哪種單行的布局，也就是說內容只有一行，不會出現換行，這樣的布局使用的比較多，我也會用這種布局來進行實現一些功能。針對於需要折行的，這種方案就不滿足，其實也不是完全不滿足，我么可以在這種方案上面進行一下簡單的改動，來滿足我們的需求。我們通過:nth-child來替換:first-child來進行實現，這里我就補貼代碼了。

二、側邊欄布局

關於側邊欄布局，這個也是我們很常見的內容，就比如說，網站的個人中心，以及說很多后台的管理系統都是這樣的。類似於如下的界面。我相信大家都挺常見的。（這個圖片是我隨便截得）

這種布局呢，主要是因為左邊的sidebar的寬度是固定的，右邊的內容區會跟着屏幕的寬度的變化進行變化的。實現這樣的布局的方式有很多，至少有五種：

第一種flex布局，具體實現如下：

.container {
  display: flex;
  width: 100%;
  height: 100%;
  background: #ffffff;
}
.aside {
  width: 200px;
  height: 100%;
  background: yellow;
}
.main {
  display: flex;
  width: 100%;
  height: 100%;
  flex: 1;
  background: red;
}

html 內容：

<div class="container">
  <div class="aside">aside</div>
  <div class="main">main</div>
</div>

這種方案比較激進（其實也不激進了，這個方法在兩年前的話確實事挺激進的），在不考慮ie系列的，以及舊版的谷歌和火狐的前提下可以使用，因為這里面用到了彈盒模型進行的布局。如果你對彈盒模型還不是很熟悉的話，我建議你去看一下阮一峰老師關於這塊兒的講解。http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

第二種實現方式：絕對定位

這種方式比較通用，兼容性相對來說比較好，很多情況下會使用這種方式來進行布局，具體代碼如下：

.container {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-left: 200px;
}
.aside {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 100%;
  background: yellow;
}
.main {
  position: relative;
  height: 100%;
  background: red;
}

其中html代碼不用發生變化。

第三種實現方式：float定位

這種布局在很多地方也都有用到，這個其實是使用css中的bfc的東西來實現的，什么是bfc呢，其實就是在一個Web頁面的CSS渲染中，塊級格式化上下文（(Block Fromatting Context)）英文的簡稱。這種布局是按照塊級盒子布局的。想要深入了解什么是bfc的話，可以參考以下鏈接來進行學習《BFC 神奇背后的原理》。

接着就是上代碼，以下就是通過是用float來進行實現的代碼：

.container {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.aside {
  position: relative;
  float: left;
  width: 200px;
  height: 100%;
  background: yellow;
  z-index: 1;
}
.main {
  position: relative;
  height: 100%;
  background: red;
  box-sizing: border-box;
  padding-left: 200px;
}

第四種實現方式：table布局

對於這種布局來說，現在很多的前端不怎么熟悉了，而且對於table布局有一個非常不好的地方就是性能問題。這個中布局在早期的前端開發中使用的比較廣泛，但是也有很多缺點，比如說剛才所說的性能，還有就是調整起來比較麻煩，所以這邊也不推薦使用table來實現這種布局方式。

當然使用table布局的情況下面，可以使用原聲的table標簽以外，還可以使用css中的display：table-cell;來進行實現。
首先我先提供一個使用原生table實現的例子，當然，這個例子中主要使用的是html代碼。代碼如下

   <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
     <tr>
       <td height="100%" width="200" bgcolor="yellow"></td>
       <td bgcolor="red"></td>
     </tr>
   </table>

這個方法其實很簡單，但是如果要使用css的display:table-cell 來進行實現的話，畢竟這個方法使用的人都比較少。具體的實現方法如下：

.container {
  position: relative;
  display: table;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.aside {
  position: relative;
  display: table-cell;
  width: 200px;
  height: 100%;
  background: yellow;
}
.main {
  position: relative;
  display: table-cell;
  height: 100%;
  background: red;
}

html代碼，和上面的內容是一致的。

三、垂直居中布局

對於垂直居中，我相信做前端的應該並不陌生，首先面試時候打多都會問這么一個問題，平時工作中也會經常遇見，最常見的一個使用常見就是彈框。對於垂直居中的實現方式其實也有多種。

方案一：絕對定位+margin

首先來談一下固定高度的垂直居中的實現方法，這個最常用的方法就是絕對定位加margin來進行實現的。如下

css

.container {
  position: relative;
  width: 100%;
  height: 100%;
}
.main {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 200px;
  height: 200px;
  background: yellow;
  margin-top: -100px;
  margin-left: -100px;
}

<div class="container">
  <div class="main">main</div>
</div>

這種方法之前使用的都很多，很多的彈框插件其實都是基於這個來進行實現的。

方案二：絕對定位 + transform

對於這種方案，一般常用局不確定內容的寬度和高度的情況下使用，而且這種方案中使用的css3的屬性，所以這種方案的經常使用在在移動端。在移動端比如說很多活動也彈框啥的都是可以使用這個方案來進行實現。

具體的實現css如下：

.container {
  position: relative;
  width: 100%;
  height: 100%;
}
.main {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 200px;
  height: 200px;
  background: yellow;
  transform: translateX(-50%) translateY(-50%);
}

方案三：使用flex進行實現

這種方案需要知道外圍的寬和高的情況下進行實現的，具體的實現方式如下

.container {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.main {
  display: block;
  width: 200px;
  height: 200px;
  background: yellow;
}

方案四使用table

這種方案的優缺點其實和上面的使用table來實現左右布局的優缺點是一致的。這總方案的前提是需要知道外圍的寬和高。具體的實現方案如下：
css代碼

.container {
  display: table;
  width: 100%;
  height: 100%;
}
.container-inner {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}
.main {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: yellow;
}

<div class="container">
  <div class="container-inner">
    <div class="main">main</div>
  </div>
</div>

當然，這種方案，也可是使用原生的table來進行實現、

第五中方案 使用line-height

這種方案其實使用的不是很多，以至於很多人都不會想這樣方向，而且，這種方案需要知道外圍的具體高度。具體的實現方案如下：

.container {
  display: block;
  width: 100%;
  height: 600px;
  line-height: 600px;
  text-align: center;
}

<div class="container">
  main
</div>

當然，上面是我總結接目前共工作中常用的布局方式，當然具體的實現方案還有別的，我還在繼續的努力學習中。