什麼是css的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名：内容(content)、填充(padding)、邊框(border)、邊界(margin)，
css盒子模式都具備這些屬性。
這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來了解，日常生活中所見的盒子也具有這些屬性，是以叫它盒子模式。那麼内容就是盒子裡裝的東西；而填充就是怕盒子裡裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至于邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了友善取出嘛。在網頁設計上，内容常指文字、圖檔等元素，但是也可以是小盒子（div嵌套），與現實生活中盒子不同的是，現實生活中的東西一般不能大于盒子，否則盒子會被撐壞的，而css盒子具有彈性，裡面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充隻有寬度屬性，可以了解為生活中盒子裡的抗震輔料厚度，而邊框有大小和顔色之分，我們又可以了解為生活中所見盒子的厚度以及這個盒子是用什麼顔色材料做成的，邊界就是該盒子與其它東西要保留多大距離。
用div來定義語義結構 現在我要給大家示範的是一個典型的版面分欄結構，即頁頭、導航欄、内容、版權（如下圖）
其結構代碼如下：
<div id="header"></div> <div
id="nav"></div> <div id="content"></div> <div
id="footer"></div>
上面我們定義了四個盒子，按照我們想要的結果是，我們要讓這些盒子等寬，并從下到下整齊排列，然後在整個頁面中居中對齊，為了友善控制，我們再把這四個盒子裝進一個更大的盒子，這個盒子就是body，這樣代碼就變成:
<body>
<div id="header"></div> <div id="nav"></div> <div
id="content"></div> <div id="footer"></div>
</body>
最外邊的大盒子（裝着小盒子的大盒子）我們要讓它在頁面居中，并重定義其寬度為760像素，同時加上邊框，那麼它的樣式是：
body
{ font-family: arial, helvetica, sans-serif; font-size: 12px; margin: 0px auto;
height: auto; width: 760px; border: 1px solid #006633; }
頁頭為了簡單起見，我們這裡隻要讓它整個區塊應用一幅背景圖就行了,并在其下邊界設計定一定間隙，目的是讓頁頭的圖像不要和下面要做的導航欄連在一起，這樣也是為了美觀。其樣式代碼為：
#header
{ height: 100px; width: 760px; background-image: url(headpic.gif);
background-repeat: no-repeat; margin:0px 0px 3px 0px; }
導航欄我做成像一個個小按鈕，滑鼠移上去會改變按鈕背景色和字型色，那麼這些小小的按鈕我們又可以了解為小盒子，如此一來這是一個盒子嵌套問題了，樣式代碼如下：
#nav
{ height: 25px; width: 760px; font-size: 14px; list-style-type: none; } #nav li
{ float:left; } #nav li a{ color:#000000; text-decoration:none; padding-top:4px;
display:block; width:97px; height:22px; text-align:center; background-color:
#009966; margin-left:2px; } #nav li a:hover{ background-color:#006633;
color:#ffffff; }
内容部分主要放入文章内容，有标題和段落，标題加粗，為了規範化，我用h标簽，段落要自動實作首行縮進2個字,同時所有内容看起來要和外層大盒子邊框有一定距離，這裡用填充。内容區塊樣式代碼為：
#content
{ height:auto; width: 740px; line-height: 1.5em; padding: 10px; } #content p {
text-indent: 2em; } #content h3 { font-size: 16px; margin: 10px;
版權欄，給它加個背景，與頁頭相映，裡面文字要自動居中對齊，有多行内容時，行間距合适，這裡的連結樣式也可以單獨指定，我這裡就不做了。其樣式代碼如下：
#footer
{ height: 50px; width: 740px; line-height: 2em; text-align: center;
background-color: #009966; padding: 10px; }
最後回到樣式開頭大家會看到這樣的樣式代碼：
* { margin: 0px; padding:
0px; }
這是用了通配符初始化各标簽邊界和填充，（因為有部分标簽預設會有一定的邊界，如form标簽）那麼接下來就不用對每個标簽再加以這樣的控制，這可以在一定程度上簡化代碼。最終完成全部樣式代碼是這樣的：
<style
type="text/css"> <!-- * { margin: 0px; padding: 0px; } body { font-family:
arial, helvetica, sans-serif; font-size: 12px; margin: 0px auto; height: auto;
width: 760px; border: 1px solid #006633; } #header { height: 100px; width:
760px; background-image: url(headpic.gif); background-repeat: no-repeat;
margin:0px 0px 3px 0px; } #nav { height: 25px; width: 760px; font-size: 14px;
list-style-type: none; } #nav li { float:left; } #nav li a{ color:#000000;
text-decoration:none; padding-top:4px; display:block; width:97px; height:22px;
text-align:center; background-color: #009966; margin-left:2px; } #nav li
a:hover{ background-color:#006633; color:#ffffff; } #content { height:auto;
width: 740px; line-height: 1.5em; padding: 10px; } #content p { text-indent:
2em; } #content h3 { font-size: 16px; margin: 10px; } #footer { height: 50px;
width: 740px; line-height: 2em; text-align: center; background-color: #009966;
padding: 10px; } --> </style>
結構代碼是這樣的：
<body> <div
id="header"></div> <ul id="nav"> <li><a href="#">首
頁</a></li> <li><a href="#">文 章</a></li>
<li><a href="#">相冊</a></li> <li><a
href="#">blog</a></li> <li><a href="#">論
壇</a></li> <li><a href="#">幫助</a></li>
</ul> <div id="content"> <h3>前言</h3>
<p>第一段内容</p> <h3>了解css盒子模式</h3> <p>第二段内容</p>
</div> <div id="footer"> <p>關于華升 | 廣告服務 | 華升招聘 | 客服中心 | q q留言
| 網站管理 | 會員登入 | 購物車</p><p>copyright ?2006 - 2008 tang guohui. all
rights reserved</p> </div> </body>