详细介绍盒模型

什么是盒模型

首先介绍一下盒模型的概念：盒模型是CSS布局的基石，它规定了网页如何显示，以及元素与元素之间的相互关系，CSS定义所有元素都可以拥有盒子一样的外形和平面空间，即包含内容区、填充区、边框以及外边距。

盒模型的组成

盒模型的组成包括：content（内容区）+ padding（填充区）+ border（边框区）+ margin（外边界）。举个例子，我们设置一个div，给这个div只设置宽度和高度，如下图：

浏览器上的演示：

虽然我们只给div元素设置了宽和高，但是浏览器上显示了padding、border、margin。因此我们可以得出浏览器显示div内容的大小是包括：元素设置的大小+padding值+border值+margin值。

这个时候我门分别给div加上padding值和border值以及margin值，如下图：

div的原始大小：

1、添加padding值之后，div的大小以及位置变化：

2、添加border值之后，div的大小以及位置变化：

3、添加margin值之后，div的大小以及位置变化：

4、添加padding、border、margin，div的大小以及位置变化：

这个时候我们能清楚的看到当我们添加padding和border的时候，div的实际大小会发生变化，但我们添加margin的时候，div的实际大小并没有发生变化，只是div的位置和所占大小发生了变化（虽然div的实际大小没有发生变化，但是整个div所占位置的大小发生了变化）。

我们可以得出以下两个结论：

1. Padding用来控制元素与内容之间的关系，border用来给元素增加边框，margin用来控制同级元素之间的位置关系
2. 要想保证div的实际大小不发生变化，在我们给div元素加上padding值和border值得时候，应该在div的宽高上减去所加的padding值和border值。