隨便開啟一個網頁，按下F12，你會發現一堆密密麻麻的“DIV”，沒錯，現在大部分的網頁都用了CSS+DIV的佈局方式。

       上篇說了盒子模型，這裡就以盒子模型為基礎來簡單瞭解一下常用的一種網頁佈局的方式：CSS+DIV佈局。

       CSS+DIV佈局，就是在整體上用<div>標記把頁面分為若干個塊，然後對各個<div>塊進行CSS定位，最後再在各個塊中新增相應內容。

       就如建造一座鋼結構的建築物似的，先把整個網頁的框架搭建起來，再分別對區域性進行細化，這裡<div>就如同鋼筋，負責搭建框架，CSS就相當於搭建的規則，按照一定的規則（即業務需求）把鋼筋焊接起來。

        那麼我們就把網頁佈局想象成一個蓋這座建築物的過程，這裡把它分為兩個步驟：

        1、選擇材料，要對需要用到的鋼筋有所瞭解，即瞭解DIV

        之前有個朋友問過我：“盒子模型是什麼，是DIV嗎?” 我否決了他，在筆者看來，網頁裡的許多元素，都可以看做是一個“盒子”，比如p、h1、form、div、span、table、tr、td等等，他們都有margin、border、padding屬性。

        只不過我們在搭建整體的網頁佈局時，一般用DIV來充當上例中“鋼筋”的角色。

        盒子模型是DIV+CSS的基礎，也是關鍵。簡單來說，盒子模型的核心就在那些“盒子”的margin、border、padding這幾個屬性上，想要佈局出合理漂亮的網頁，這是基本功。

        2、對材料進行切割、焊接

        瞭解了DIV及盒子模型等基礎知識後，就要對這些材料進行切割（設計不同大小的DIV）並焊接（用CSS定位相應的DIV）。     

        切割不用多說，就是畫出DIV並用CSS規定其大小形狀（即margin、border、padding的值）。

        這裡的重點是焊接，焊接時需要挑選大小不一的DIV塊，進行合理的擺放，也就是所說的DIV定位，包括對DIV的position、float、z-index屬性的設定。

        position屬性：四個屬性值分別為static、absolute、relative、fixed，下表是W3C對這幾個屬性值的說明：

  float屬性，有left、right、none、inherit四個屬性值：

            細節不再多說，不清楚的同學可以自己做幾個小例子動手實踐一下，或者到W3School上實踐一下，這裡有豐富的web教程和一些可以線上練習的小例子。

    float在這裡是難點也是重點，希望讀者熟練掌握。

  z-index屬性：

        z-index的值可以為任意整數值，可以為正數也可以為負數，代表著元素“顯示的優先順序”，值越大，顯示的優先順序越高。兩張簡單的圖片足以說明：

        這兩幅圖片，第一幅圖片中三個div的z-index值分別為：A<B<C；第一幅圖片中三個div的z-index值分別為：A>B>C。

        這些都只是CSS+DIV佈局最基礎的知識，想要真正吃透，還需要不斷練習，體會佈局的一些小技巧。比如對margin使用負值就是一個很實用的小技巧，假如想讓container固定寬度居中顯示（假設container寬度為700px），則可以對container採用relative的定位方法，left值為頁面的50%，再設定margin-left為自己寬度的一半，這樣，無論在哪種解析度的瀏覽器中顯示效果都是固定寬度且居中，如下圖：

        當頁面中的內容顯示不夠多時，如何讓最底部的footer（版權註冊部分）永遠保持在最底部，也可以用對margin設定負值的方法來實現。

       多多地積累吧，期待與您共同成長。