我们可以将HTML的所有元素看作一个盒子，在CSS中，"box model"这一术语用在设计和布局时使用。
下面的图片说明了盒子模型：
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
我们可以用生活中的盒子来理解。Margin可以比作盒子与盒子之间的空隙，你可将两个盒子摆放得有一定间距，也可以将两个盒子并在一起，即把Margin的值设为0。Border可以比作盒子本身，我们通过改变Border的值来改变盒子的厚度，还可以通过改变color和style来改变盒子的颜色或样式。Padding可以比作盒子里面的填充物，比如泡沫板等东西。Content可以比作盒子里面的东西，我们可以添加文本或者是照片等。
盒子模型的三维立体结构图：
盒子模型的三维立体结构图：
边框（border），位于盒子的第一层。
元素内容（content）、内边距（padding），两者同位于第二层。
背景图（background-image），位于第三层。
背景色（background-color），位于第四层。
整个盒子的外边距（margin），位于第五层。
元素的宽度和高度
CSS盒子模型是具有弹性的，会根据你的内容宽度和高度变化。一个完全大小的元素，你还得添加填充、边框和边距。
例子如下：
HTML代码
CSS代码
展示结果
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
