如果你想嘗試一下不用**來排版網頁，而是用css
來排版你的網頁，也就是常聽的用
div來編排你的網頁結構，又或者說你想學習網頁標準設計，再或者說你的上司要你改變傳統的**排版方式，提高企業競爭力，那麼你一定要接觸到的乙個知識點就是
css的盒子模式，這就是
div排版的核心所在，傳統的**排版是通過大小不一的**和**巢狀來定位排版網頁內容，改用
css排版後，就是通過由
css定義的大小不一的盒子和盒子巢狀來編排網頁。因為用這種方式排版的網頁**簡潔，更新方便，能相容更多的瀏覽器，比如
pda裝置也能正常瀏覽，所以放棄自己之前鍾愛的**排版也是值得的，更重要的是
css排版網頁的優勢遠遠不只這些。
什麼是css
的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名：內容
(content)
、填充(padding)
、邊框(border)
、邊界(margin)
，css
盒子模式都具備這些屬性。如下圖所示：
這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那麼內容就是盒子裡裝的東西；而填充就是怕盒子裡裝的東西（貴重的）損壞而新增的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至於邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。在網頁設計上，內容常指文字、等元素，但是也可以是小盒子（div
巢狀），與現實生活中盒子不同的是，現實生活中的東西一般不能大於盒子，否則盒子會被撐壞的，而
css盒子具有彈性，裡面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充只有寬度屬性，可以理解為生活中盒子裡的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。
文件流：將窗體自上而下分成一行一行
，並在每行中按從左至右的挨次排放元素,
即為文件流。
div是塊級元素，在頁面中獨佔一行，自上而下排列。
每個非浮動塊級元素都獨有一行,
浮動元素則按規則浮在行的一端。若當
前行容不下,
則另起新行再浮動。內聯元素也不會獨有一行
。一切元素(
包括塊級
,內聯和列表元素
)均可生成子行
, 用於擺放子元素。有三種狀況將使得元素離開文件流而存在
,分別是浮動、絕對定位、固定定位
。然則在ie
中浮動元素也存在於文件流中。
假如某個div元素a
是浮動的，如果
a元素上乙個元素也是浮動的，那麼
a會跟隨在上乙個元素的後邊（如果一行放不下這兩個元素，那麼aa
元素上乙個元素是標準流中的元素，那麼
a的相對垂直位置不會改變，也就是說
a的頂部總是和上乙個元素的底部對齊。
標籤元素：float
這個規則只能影響使用清除的元素本身，不能影響其他元素。
元素值：none
預設值。
元素值：left
元素向左浮動。
元素值：right
元素向右浮動。
元素值：inherit
從父元素繼承float
屬性。編號 特性
1相鄰的浮動元素，left
屬性最前面的元素，排在最左面。2
相鄰的浮動元素，right
屬性最前面的元素，排在最右面。3
成為浮動元素後，在浮動層擁有內聯元素的"特性"
，當多個浮動元素
1排容不下時，就換行。4
height不相等的
div浮動元素排序時，照擁有內聯元素的"特性
"，當多個浮動元素
1排容不下時，就換行。5
把新增float
的屬性的
div元素嵌入在乙個
div中，並給此
div新增
width
和height
屬性。瀏覽器寬度縮小時，也不會發生變形。
標籤元素：clear
該規則只能影響使用清除的元素本身，不能影響其他元素。
該屬性的值指出了不允許有浮動物件的邊。
這個屬性是用來控制float
屬性在文件流的物理位置的。
當屬性設定float
（浮動）時，他所在的物理位置已經脫離文件流了，但是大多時候我們希望文件流能識別
float
（浮動）
,或者是希望
float
（浮動）後面的元素不被
float
（浮動）所影響，這個時候我們就需要用
clear:both;
來清除。
元素值：none
表示兩邊允許有浮動元素。
元素值：left
表示該元素左邊不存在浮動元素。
元素值：right
表示該元素右邊不存在浮動元素。
元素值：both
表示該元素兩邊都不存浮動元素。
標籤元素
position
元素值：absolute
是生成絕對定位的元素，脫離了文字流（即在文件中已經不佔據位置），參照瀏覽器的左上角通過top,right,bottom,left
（簡稱trbl
） 定位。可以選取具有定位的父級物件（如：
relative
與absolute
的結合使用）或者
body
座標原點進行定位，也可以通過
z-index
進行層次分級。
absolute
在沒有設定
trbl
值時是根據父級物件的座標作為始點的，當設定
trbl
值後則根據瀏覽器的左上角作為原始點。
在網頁設計時經常會用到浮動來對頁面進行布局，但是浮動所帶來的不確定因素卻很多（例如：ie
瀏覽器的相容問題）。相對來說，在有些布局中定位使用會更加簡單、快捷、相容性更好（
relative
與absolute
相結合來使用）。
比如有乙個父級div
標籤head
，其它下包含多個子標籤。
首先給head
設定relative
定位，那麼可以看到裡面所有的子元素在設定
absolute
後都會相對
head
進行定位，而不是相對
body
定位。這樣相對於用浮動來說就簡單方便了很多，也不需要擔心相容問題。
標籤元素
position
元素值：fixed
生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過"left","top","right"
以及"bottom"
屬性進行規定。
結構和表現相分離，這也用css
布局的特色所在，結構與表現分離後，**才簡潔，更新才方便，這不正是我們學習
css的目的所在嗎？舉個例來說
p是結構化標籤，有
p標籤的地方表示這是乙個段落區塊，
margin
是表現屬性，我要讓乙個段落右縮排
2字高，有些人會想到加空格，然後不斷地加空格，但現在可以給
p標籤指定乙個
css樣式：
p ，這樣結果
body
內容部分
就自動縮排兩個漢字。
改用css
排版後，我們主要考慮的是頁面內容的語義和結構，因為乙個強
css控制的網頁，等做好網頁後，你還可以輕鬆的調你想要的網頁風格，況且
css排版的另外乙個目的是讓**易讀，區塊分明，強化**重用，所以結構很重要。如果你想說我的網頁設計的很複雜，到後來能不能實現那樣的效果？我要告訴你的是，如果用
css實現不了的效果，一般用**也是很難實現的，因為
css的控制能力實在是太強大了，順便說一點的是用
css排版有乙個很實用的好處是，如果你是接單做**的，如果你用了
css排版網頁，做到後來客戶有什麼不滿意，特別是色調的話，那麼改起來就相當容易，甚至你還可以定製幾種風格的
css檔案供客戶選擇，又或者寫乙個程式實現動態呼叫，讓**具有動態改變風格的功能。
CSS網頁排版
自印刷出版物誕生以來，排版就一直是平面設計的基礎。同樣，排版在網頁設計中也扮演著重要角色。對應網頁而言，文字顏色也許是最基本的樣式之一。預設情況下，瀏覽器把絕大部分文字渲染為黑色。p字型族 font family 屬性的值是乙個備選字型的列表，按優先順序從左到右排列。bodygeorgia是一種襯線...
網頁布局 div
簡單的網頁布局 注釋就不寫了，看看就懂了，不懂看前面的兩個博文都有詳細講解 效果圖 網頁布局.html charset gb2312 網頁布局title rel stylesheet href style.css type text css head id first 導航div id second...
Bootstrap 之網頁內容排版
文章中介紹到可以使用small標記來為h1到h6標記新增副標題,但是在測試中卻沒有發生任何的效果 bootstrap會自動為段落 標籤加上10px的底部外邊距,全域性字型大小為14px,行高為 1.428 address 標籤讓聯絡資訊以最接近日常使用的格式呈現,每行結尾新增 可以保留需要的樣式 d...