頁面的結構要與頁面的表現分離，HTML負責頁面結構，CSS負責頁面表現。也就是說，CSS是用來修飾HTML元素的。這就涉及到一個問題，就是從CSS的角度如何看待一個HTML元素。答案就是“盒子模型”。從CSS的角度看，每一個HTML元素都是以盒子的方式呈現的。
首先看一段HTML代碼，如代碼清單3-1所示。
---------------------------------------------- 代碼清單 3-1 -----------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 5 Demo</title>
</head>
<body>
<div>CSS盒子模型</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------
在Chrome瀏覽器“開發者工具”視圖中可以看到示例代碼中div元素的盒子模型，如圖3-1所示。
---------------------------------------------- 圖 3-1 ----------------------------------------------------
----------------------------------------------------------------------------------------------------------
示例中的div元素除了內容之外（藍色部分），還包括padding、border和margin，就像多個盒子套在一起，這也許就是“盒子模型”名字的由來吧。如果打個比方的話，HTML元素在CSS看來就相當于一幅畫，內容就是畫本身，padding相當于畫周圍的留白，border是畫框，margin就是兩幅畫之間的距離。
在Chrome瀏覽器下，padding和border的默認值為0，margin的默認值為8。運行這段代碼的電腦的屏幕分辨率為1366，而1350 x 10是div內容部分的寬度，也就是div元素width屬性的值。可以看得出來，HTML元素width屬性的寬度默認是以“外擴”的方式呈現的。
下面通過CSS對這個div盒子的各個部分做設置，如代碼清單3-2所示。
---------------------------------------------- 代碼清單 3-2 -----------------------------------------------
div {
width: 200px;
padding: 10px;
border: solid 5px;
margin: 20px;
}
----------------------------------------------------------------------------------------------------------
在HTML頁面的head元素中以link方式引入CSS樣式表，如代碼清單3-3所示：
---------------------------------------------- 代碼清單 3-3 -----------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 5 Demo</title>
<link href="3-1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>CSS盒子模型</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------
設置了樣式之后，這個div盒子模型的變化如圖3-2所示。
---------------------------------------------- 圖 3-2 ----------------------------------------------------
----------------------------------------------------------------------------------------------------------
此時，這個div實際占有的寬度為230 x 48，即在with的基礎上加padding和border的寬度。
在CSS中增加一個有關元素寬度設置的屬性：box-sizing，這個屬性是用來規定width設置的是誰的寬度。修改之前的CSS代碼，增加box-sizing的設置，如果代碼清單3-4所示。
---------------------------------------------- 代碼清單 3-4 -----------------------------------------------
div {
width: 200px;
padding: 10px;
border: solid 5px;
margin: 20px;
box-sizing: border-box;
}
----------------------------------------------------------------------------------------------------------
修改后這個div的盒子模型如圖3-3所示。
---------------------------------------------- 圖 3-3 ----------------------------------------------------
----------------------------------------------------------------------------------------------------------
box-size的值設置為border-box表示元素的with屬性是指border這個盒子的寬度，而不再是內容（content）這個盒子的寬度了。此時with屬性的值表現在“內減”，而不是之前默認的“外擴”。
box-sizing屬性的值還可以是padding-box和content-box(默認)。這個屬性在流式布局中特別的常用！
----------------------------------
把人做到寬容，把技術做到強悍。