CSS盒子模型

我们可以将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代码

展示结果

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距