前言
如果你想嘗試一下不用**來排版網頁，而是用css來排版你的網頁，也就是常聽的用div來編排你的網頁結構，又或者說你想學習網頁標準設計，再或 者說你的上司要你改變傳統的**排版方式，提高企業競爭力，那麼你一定要接觸到的乙個知識點就是css的盒子模式，這就是div排版的核心所在，傳統的表 格排版是通過大小不一的**和**巢狀來定位排版網頁內容，改用css排版後，就是通過由css定義的大小不一的盒子和盒子巢狀來編排網頁。因為用這種方 式排版的網頁**簡潔，更新方便，能相容更多的瀏覽器，比如pda裝置也能正常瀏覽，所以放棄自己之前鍾愛的**排版也是值得的，更重要的是css排版網 頁的優勢遠遠不只這些，本人在這裡就不多說，自己可以去查詢相關資訊。
理解css盒子模型
什麼是css的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， css盒子模式都具備這些屬性。
css盒子模式
這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那麼內容就是盒子裡裝 的東西；而填充就是怕盒子裡裝的東西（貴重的）損壞而新增的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至於邊界則說明盒子擺放的時候的不能全部堆在一 起，要留一定空隙保持通風，同時也為了方便取出嘛。在網頁設計上，內容常指文字、等元素，但是也可以是小盒子（div巢狀），與現實生活中盒子不同的 是，現實生活中的東西一般不能大於盒子，否則盒子會被撐壞的，而css盒子具有彈性，裡面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充只有寬度 屬性，可以理解為生活中盒子裡的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的，邊界 就是該盒子與其它東西要保留多大距離。在現實生活中，假設我們在乙個廣場上，把不同大小和顏色的盒子，以一定的間隙和順序擺放好，最後從廣場上空往下看， 看到的圖形和結構就類似我們要做的網頁版面設計了，如下圖。
由「盒子」堆出來的網頁版面
現在對css盒子模式理解多少了，如果還不夠透徹，繼續往下看，我會在後面舉例，並延用盒子的概念來解釋它。
轉變我們的思路
傳統的前台網頁設計是這樣進行的：根據要求，先考慮好主色調，要用什麼型別的，用什麼字型、顏色等等，然後再用photoshop這類軟體自由 的畫出來，最後再切成小圖，再不自由的通過設計html生成頁面，改用css排版後，我們要轉變這個思想，此時我們主要考慮的是頁面內容的語義和結構，因 為乙個強css控制的網頁，等做好網頁後，你還可以輕鬆的調你想要的網頁風格，況且css排版的另外乙個目的是讓**易讀，區塊分明，強化**重用，所以 結構很重要。如果你想說我的網頁設計的很複雜，到後來能不能實現那樣的效果？我要告訴你的是，如果用css實現不了的效果，一般用**也是很難實現的，因 為css的控制能力實在是太強大了，順便說一點的是用css排版有乙個很實用的好處是，如果你是接單做**的，如果你用了css排版網頁，做到後來客戶有 什麼不滿意，特別是色調的話，那麼改起來就相當容易，甚至你還可以定製幾種風格的css檔案供客戶選擇，又或者寫乙個程式實現動態呼叫，讓**具有動態改 變風格的功能。
實現結構與表現分離
在真正開始布局實踐之前，再來認識一件事——結構和表現相分離，這也用css布局的特色所在，結構與表現分離後，**才簡潔，更新才方便，這不正是 我們學習css的目的所在嗎？舉個例來說p是結構化標籤，有p標籤的地方表示這是乙個段落區塊，margin是表現屬性，我要讓乙個段落右縮排2字高，有 些人會想到加空格，然後不斷地加空格，但現在可以給p標籤指定乙個css樣式：p ，這樣結果body內容部分就如下，這沒有外加任何表現控制的標籤：
加進天涯社群有一段時間了，但一直沒有時間寫點東西，今天寫了一篇有關css布局的文章，並力求通過一種通俗的語言來說明知識點，還配以例項和，相信對初學css布局的人會帶來一定的幫助。
如果還要對這個段落加上字型、字型大小、背景、行距等修飾，直接把對應的css加進p樣式裡就行了，不用像這樣來寫了：
段落內容
這個是結構和表現混合一起寫的，如果很多段落有統一結構和表現的話，再這樣累加寫下去**就繁冗了。
再直接列一段**加深理解結構和表現相分離：
用css排版
不用css排版
用css排版減小網頁檔案體積
像上面我做的那個版面，一共分為四個區塊，每個區塊的框架是一樣的，這個框架就是用css寫出來的，樣式寫一次，就可以被無數次呼叫了(用class呼叫，而不是id)，只要改變其中的文字內容就可以生成風格統一的眾多板塊了，它的樣式和結構**是（請不要直接複製生成網頁，把下面**分別貼上到網頁中它們應在的位置 ）：
正文內容
正文內容
正文內容
正文內容
徹底弄懂CSS盒子模式之一
前言 如果你想嘗試一下不用 來排版網頁，而是用css來排版你的網頁，也就是常聽的用div來編排你的網頁結構，又或者說你想學習網頁標準設計，再或者說你的上司要你改變傳統的 排版方式，提高企業競爭力，那麼你一定要接觸到的乙個知識點就是css的盒子模式，這就是div排版的核心所在，傳統的 排版是通過大小不...
徹底弄懂CSS盒子模式
前言 如果你想嘗試一下不用 來排版網頁，而是用css來排版你的網頁，也就是常聽的用div來編排你的網頁結構，又或者說你想學習網頁標準設計，再或者說你的上司要你改變傳統的 排版方式，提高企業競爭力，那麼你一定要接觸到的乙個知識點就是css的盒子模式，這就是div排版的核心所在，傳統的 排版是通過大小不...
徹底弄懂CSS盒子模式五 定位強化練習
我的淘貨之家 url 執行 框 一 例項實現功能介紹 本例項為乙個欄目鏈結列表，滑鼠移動到鏈結所在行，鏈結文字顏色會改變，同時會在鏈結右下側顯示乙個與鏈結相干的資訊面板，資訊面板中左邊有一幅，右側又有三項說明，它們分別是 歌名 歌手 介紹 這個欄目被重定位到其它地方，效果 位置不會發生改變，全程只用...