在之前的HTML入門教程中，我們學習了一個很重要的理論“塊元素和行內元素”。在這一節中，我們將接觸CSS中一個極其重要的理論，那就是“CSS盒子模型”理論。
在“CSS盒子模型”理論中，所有頁面中的元素都可以看成一個盒子，並且占據著一定的頁面空間。
一個頁面由很多這樣的盒子組成，這些盒子之間會互相影響，因此掌握盒子模型需要從兩個方面來理解：一是理解單獨一個盒子的內部結構，二是理解多個盒子之間的相互關系。
每個元素都看成一個盒子，盒子模型是由content（內容）、padding（內邊距）、margin（外邊距）和border（邊框）這四個屬性組成的。此外，在盒子模型中，還有寬度width和高度height兩大輔助性屬性。
記住，是所有的元素都可以看出一個盒子！
下圖為一個CSS盒子模型的內部結構：
圖1 CSS盒子模型
從上圖中我們可以得出盒子模型的屬性如下：
其中，padding稱為“內邊距”，也常常稱為“補白”。圖1中的margin-top指的是頂部外邊距、margin-right指的是右部外邊距，以此類推。
內容區是CSS盒子模型的中心，它呈現了盒子的主要信息內容，這些內容可以是文本、圖片等多種類型。內容區是盒子模型必備的組成部分，其他的3部分都是可選的。
內容區有3個屬性：width、height和overflow。使用width和height屬性可以指定盒子內容區的高度和寬度。在這裡注意一點，width和height這兩個屬性是針對內容區而言，並不包括padding部分。
當內容信息太多時，超出內容區所占范圍時，可以使用overflow溢出屬性來指定處理方法。對於overflow這個屬性，我們在後面會詳細講解到。
內邊距，指的是內容區和邊框之間的空間，可以被看做是內容區的背景區域。
關於內邊距的屬性有5種，即padding-top、padding-bottom、padding-left、padding-right以及綜合了以上4個方向的簡潔內邊距屬性padding。使用這5種屬性可以指定內容區域各方向邊框之間的距離
在CSS盒子模型中，邊框跟我們之前學過的邊框是一樣的。
邊框屬性有border-width、border-style、border-color以及綜合了3類屬性的快捷邊框屬性border。
其中border-width指定邊框的寬度，border-style指定邊框類型，border-color指定邊框的顏色。
“border-width:1px;border-style:solid;border-color:gray;”等價於“border:1px solid gray;”。
外邊距，指的是兩個盒子之間的距離，它可能是子元素與父元素之間的距離，也可能是兄弟元素之間的距離。
外邊距使得元素之間不必緊湊地連接在一起，是CSS布局的一個重要手段。
外邊距的屬性也有5種，即margin-top、margin-bottom、margin-left、margin-right以及綜合了以上4個方向的簡潔內邊距屬性margin。
同時，CSS允許給外邊距屬性指定負數值，當指定負外邊距值時，整個盒子將向指定負值的相反方向移動，以此可以產生盒子的重疊效果。這就是傳說中的“負margin技術”，我們將會在“CSS進階教程”中給讀者詳細講解這一個高大上的技術喔。
內容區、內邊距、邊框、外邊距這幾個概念可能比較抽象，對於初學者來說，一時半會還沒辦法全部理解。不過沒關系，待我們把這一章學習完再回顧這些概念就變得很簡單了。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS盒子模型</title>
<style type="text/css">
#main
{
display:inline-block;/*將塊元素轉換為inline-block元素*/
border:1px solid #CCCCCC;
}
.lvye
{
display:inline-block; /*將塊元素轉換為inline-block元素*/
padding:20px;
margin:40px;
border:1px solid red;
background-color:#FCE9B8;
}
span{border:1px solid blue;background-color:#C5FCDF;}
</style>
</head>
<body>
<div id="main">
<div class="lvye"><span> 學習網</span></div>
</div>
</body>
</html>
在浏覽器預覽效果如下：
我們把class為lvye的div層看做一個盒子，則淺藍色部分為“內容區”，淺紅色部分為“內邊距區”，紅色邊框與灰色邊框之間的空白為“外邊距區”，紅色的邊框為該盒子的邊框。
當然，我們也可以把最外層的id為main的div層看做一個盒子（因為所有HTML元素都可以看做一個盒子來理解），那讀者自己嘗試一下，為最外層的id為main的div層添加內邊距和外邊距，然後思考一下該盒子的“內容”、“外邊距”、“內邊距”和“邊框”分別是什麼？
我們從下面這種圖可以很直觀地去理解CSS盒子模型，讀者要細細體會一下：