HTML元素都可以看做一個裝了東西的盒子，
1,盒子裏面的內容到盒子邊框之間的距離即填充(padding),
2,盒子本身有邊框(border)
3,盒子邊框外和其他盒子之間的距離是邊界(margin)
看到一個關於盒模型的圖示，覺得寫的很好，分享給大家一下。
下面我們來看一個盒模型的實例，
比方說我們要設計這樣一個網頁，如下圖：
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></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>
nBody的樣式設置:
n最外邊的大盒子（裝着小盒子的大盒子）我們要讓它在頁面居中，並重定義其寬度爲760像素，同時加上邊框，那麼它的樣式是：
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}
n頁頭爲了簡單起見，我們這裏只要讓它整個區塊應用一幅背景圖就行了,並在其下邊界設計定一定間隙，目的是讓頁頭的圖像不要和下面要做的導航欄連在一起，這樣也是爲了美觀。其樣式代碼爲：
n#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}
n導航欄我做成像一個個小按鈕，鼠標移上去會改變按鈕背景色和字體色，那麼這些小小的按鈕我們又可以理解爲小盒子，如此一來這是一個盒子嵌套問題了，樣式代碼如下：
n#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;
}
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;
#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;
n版權欄，給它加個背景，與頁頭相映，裏面文字要自動居中對齊，有多行內容時，行間距合適，這裏的鏈接樣式也可以單獨指定，其樣式代碼如下：
n#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}