隨便開啟乙個網頁，按下f12，你會發現一堆密密麻麻的「div」，沒錯，現在大部分的網頁都用了css+div的布局方式。
上篇說了盒子模型，這裡就以盒子模型為基礎來簡單了解一下常用的一種網頁布局的方式：css+div布局。
css+div布局，就是在整體上用標記把頁面分為若干個塊，然後對各個塊進行css定位，最後再在各個塊中新增相應內容。
就如建造一座鋼結構的建築物似的，先把整個網頁的框架搭建起來，再分別對區域性進行細化，這裡就如同鋼筋，負責搭建框架，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對這幾個屬性值的說明：
值
描述
static
預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
inherit
規定應該從父元素繼承 position 屬性的值。
absolute
生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative
生成相對定位的元素，相對於其正常位置進行定位。
因此，"left:20" 會向元素的 left 位置新增 20 畫素。
fixed
生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 "left",
"top", "right" 以及 "bottom" 屬性進行規定。
一般情況下，當元素的position屬性值為absolute或fixed時，它就不再受父元素的約束，只根據到頁面的left、top、right和bottom的值來定位。
float屬性，有left、right、none、inherit四個屬性值：
值
描述
none
預設值。元素不浮動，並會顯示在其在文字中出現的位置。
inherit
規定應該從父元素繼承 float 屬性的值。
left
元素向左浮動。
right
元素向右浮動。
float在這裡是難點也是重點，希望讀者熟練掌握。
z-index屬性：
z-index的值可以為任意整數值，可以為正數也可以為負數，代表著元素「顯示的優先順序」，值越大，顯示的優先順序越高。兩張簡單的足以說明：
這兩幅，第一幅中三個div的z-index值分別為：a第一幅中三個div的z-index值分別為：a>b>c。
這些都只是css+div布局最基礎的知識，想要真正吃透，還需要不斷練習，體會布局的一些小技巧。比如對margin使用負值就是乙個很實用的小技巧，假如想讓container固定寬度居中顯示（假設container寬度為700px），則可以對container採用relative的定位方法，left值為頁面的50%，再設定margin-left為自己寬度的一半，這樣，無論在哪種解析度的瀏覽器中顯示效果都是固定寬度且居中，如下圖：
當頁面中的內容顯示不夠多時，如何讓最底部的footer（版權註冊部分）永遠保持在最底部，也可以用對margin設定負值的方法來實現。
多多地積累吧，期待與您共同成長。
Css Div布局學習（一） Div布局基礎
如果我們要進行css的布局，那float 浮動 就是最為關鍵的乙個屬性了。浮動可以使你的塊元素不遵守元素流的布局特性，如果不採用浮動，元素將乙個接乙個地往下排列。float屬性有三個值 left right和none，後面我們就會使用這些值的。我們將使用事例來說明布局的特性。我們做乙個html檔案，...
精通CSS DIV網頁樣式與布局 基礎
一 定義。層疊樣式表，是用於控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。二 基本元素。2.1選擇器。定義 要使用css對html頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到css選擇器。類別 1 標記選擇器用法 h1 2 類別選擇器用法 class 3 id選擇器用法...
網頁css div布局技巧
後台設計 1.盡量使用內嵌iframe frameset方式布局 設定overflow visible 當內容超過乙個屏的時候就會出現豎向滾動條 2.屏的高度最好剛好乙個屏 一般是用min height max height height 3.布局使用position float對元素進行定位 使用...