在各類智能手機和平板出現前的很長一段時間里，Web網頁都是通過表格進行布局的。由于表格在視覺呈現上的直觀，早期很多WYSIWYG（所見即所得）的網頁設計軟件通常也多使用表格。

但是這種布局方式有很大的局限性——比如，同一行或列的單元格在長度、寬度上會相互影響和制約等。如今，表格式布局早已不再流行，本文就此介紹將其「拍死在沙灘上」、目前最為廣泛采用的網頁布局方式——Div + CSS。

一、什么是Div+CSS

所謂Div + CSS,是指通過HTML「層」標簽——<div></div>,輔以CSS中對該「層」寬度、排列等樣式的定義，來實現網頁布局的一種方式。如果你不懂什么是CSS和HTML，可以參考前端入門篇（一）：如何把設計稿還原成真實網頁。

二、為什么要用Div

為什么要用Div取代Table？一言以蔽之：靈活。

Table的格式其實是一定的——首先要有一個表格，其次表格里要有行，每一行又分為許多列(單元格)。如果在同一行的某個單元格中，要布局放入更多內容，而左右兩邊的單元格不變的話，要怎么實現？

只能在單元格里再嵌套一個表格。如果嵌套層數少那還好，一旦層數多起來，絕逼要瘋。這還是不涉及修改的情況。如果某天你老板拍腦袋說，把登陸模塊給我從右邊移到左邊，你就等著加班吧。

Tabel 嵌套示意

與之相對地，用Div布局就遠為靈活。首先，每一個<div></div>中都可以嵌入另外一個或幾個<div></div>,子子孫孫可無窮盡也。另外，要修改某個Div的布局位置，也只需要相應的調整其CSS樣式即可。

三、如何連接Div和CSS

但是Div所謂的靈活也并非隨心所欲、胡亂排布，它也是遵守一定的排布規則的——事實上，它在排布上與Table還是有些相似的。具體來說，Table的排布方式一般如下。

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

而一般Div的排布方式也與之類似，只不過并沒有表格<table></table>、行<tr></tr>、單元格<td></td>這許多層級，只是單一層級的<div></div>而已。

<div>
  <div>
    <div></div>
    <div></div>
  </div>
</div>

那么問題來了，這些Div長得一毛一樣啊，我怎么讓瀏覽器知道它們是在什么位置的？這里就輪到CSS出場了。我們通過CSS樣式的定義，再在HTML的<div></div>中調用這些樣式，就可以實現Div和CSS的連接。

舉例來說，如果我們在CSS中聲明了一個樣式——.row{width:100%;}，那么在HTML中就可以注明某一或某些Div適用這一類，來調用這一樣式。如下，第二層的Div就使用了row這個樣式。

<div>
  <div class=“row”>
    <div></div>
    <div></div>
  </div>
</div>

四、將頁面等分成12欄

分欄布局是使用Div+CSS布局網頁的一種主要布局方式，主要通過把頁面等分成12欄來實現。為什么要分成12欄？話說網頁被分成12欄也太恐怖了吧，在小點的屏幕上每一欄大概只有兩個手指寬吧？啊喂，會引發密集恐懼癥的吧？

等等，你先別急，先來想想一般你看到的網站都會分成幾欄？一欄？有的。兩欄？也有。三欄？這個好像還比較常見。四欄？這個也比較常見。欄數再加下去也不是沒有，但是就像之前說的，恐怕要引發密恐了。

那么這幾個數字和12有什么關系呢？很簡單，都能整除12。所以說，把頁面分成12欄的好處就是——能利用合并欄來將頁面等分成2、3、4欄，如下圖。

12欄頁面布局

而在利用這個12 column grid以后，在使用CSS布局上也會有非常大的好處。具體是什么好處呢？我們來直接看代碼的實例吧。首先我們在CSS中，定義如下樣式。

.row {
    width:100%;
    display:flex; /*這是為了讓同一row中的Div橫向排列而不是默認的縱向*/
}
.col-1 {
    width: 8.33%;
}
.col-2 {
    width: 16.67%;
}
.col-3 {
    width: 25%;
}

/*繼續col-4,col-5一直定義下去直到col-12，具體省略*/

.col-12 {
    width:100%;
}

有了這些不同寬度的column樣式定義，我們就可以開始自由地排列頁面中的Div啦，舉例來說，假設下邊圖中的黑框就是我們網頁中要布局的層，那我們就可以用其下的代碼來實現。

假設圖中黑框是 Div

<div class=“row”>
  <div class=“col-7”></div>
  <div class=“col-5”></div>
</div>

<div class=“row”>
  <div class=“col-12”></div>
</div>

<div class=“row”>
  <div class=“col-3”></div>
  <div class=“col-3”></div>
  <div class=“col-3”></div>
  <div class=“col-3”></div>
</div>

怎么樣，很簡單吧？

關于Div+CSS布局網頁的好處，除了上文所述外，還有就是能應用于響應式（Responsive）頁面。至于什么是響應式頁面以及如何適配，請移步前端入門篇（三）：響應式網頁設計101。

原文地址