CSS 盒子模型

盒子模型是CSS中非常重要的一个概念。所有HTML元素都可以看作盒子。在CSS中，"box model"这一术语一般在设计和布局时使用。CSS盒模型本质上是一个盒子，封装内部的的HTML元素，它包括：实际内容，填充（内边距），边框和外边距。下面的图片说明了盒子模型：

下面依次来说明各部分：

content（内容）

该部分是盒子的内容，可以显示文本和图像。

padding（填充）

该部分是透明的，单独使用padding属性可以改变上下左右的填充。
例如：

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

在实际项目中，为了缩短代码，往往使用它的简写属性：

padding: 25px 50px;

该代码与之前代码实现的功能一样。padding属性，可以有一到四个值。

• 四个值：上-右-下-左
• 三个值：上-左右-下
• 两个值：上下-左右
• 一个值：所有填充

border（边框）

可以在border属性中设置：

• border-width
• border-style
• border-color

你也可以通过它的简写属性在一个属性中设置边框，例如：

border: 5px solid red;

若要上下左右设置不同的边框，类似以上padding的做法，参数个数以及对应的顺序与设置padding时一致。

margin（外边距）

与padding一样，margin没有背景颜色，是完全透明的。除了空间位置不同以外，设置上下左右外边距的方式与padding完全相同。
关于外边距，有一个外边距合并问题需要注意：
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。外边距合并（叠加）是一个相当简单的概念，但是，在实践中对网页进行布局时，它会造成很多混淆。

关于盒子模型的计算

当指定一个CSS元素的宽度和高度属性时，只是设置内容区域的宽度和高度。要知道，完全大小的元素，还必须添加填充，边框和外边距。
例如，有下面一个盒子：

div {
    width: 300px;
    height: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左右填充+左右边框+左右边距
因此以上盒子的总宽度为：
300px（宽）+ 50px（左右填充）+ 50px（左右边框）+ 50px（左右边距） = 450px
高度的计算方法类似。