CSS中的盒子模型是网页布局中最基本的概念之一。
盒子模型定义了一个网页元素在浏览器中所占的空间大小
。一个盒子有4个不同的区域：content、padding、border和margin。
.box {
width: 200px;
/*设置width*/
height: 200px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
这个例子中，一个名为“box”的元素被创建，并应用了盒子模型。盒子的content部分大小是：200px x 200px，padding大小是20px，border大小是1px，margin大小是10px。
要注意的是，CSS中的“width”实际上是指元素content的宽度。如果要计算盒子的总宽度，应该加上padding、border和margin的大小。
.box {
width: 200px;
height: 200px;
padding: 20px;
border: 1px solid black;
margin: 10px;
box-sizing: border-box;
/*盒子模型计算整体大小*/
}
为了更方便的计算盒子的整体宽度，在CSS3中引入了“box-sizing”属性。当设置为“border-box”时，盒子的宽度会自动计算出“padding”和“border”的大小，以便整体大小不超过设置的宽度。
盒子模型的宽度对于网页布局非常重要，如果不理解盒子模型的概念，将会使整个布局出现错位、不对齐的问题。
