页面的结构要与页面的表现分离，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(默认)。这个属性在流式布局中特别的常用！
----------------------------------
把人做到宽容，把技术做到强悍。