盒模型的组成部分

前言

我们在编写代码中每一个标签就会生成一个盒子。

常规盒子的组成部分：

 

一个盒子由四部分组成：content、padding、border、margin。如下：

 

• content：内容（在不给padding、border、margin的情况下我们自己给的尺寸就是content 的尺寸）。
• padding：内边距（border与content两者之间的区域）。
• border：边框（padding区域外面的的边框）。
• margin：外边距（border外面与其他盒子之间的距离）。

 

打个比方：一个盒子就是一个煮好了的鸡蛋，蛋黄就是他的content，蛋白就是他的padding区域，蛋壳就是他的border，蛋壳的外面与其他物体的距离就是他的margin区域。

其中padding、border、margin都有四个方向 去下图所示，四个方向为上下左右，四个方向的值是可以单独给他进行设置的，

子盒子（IE盒模型）：

边框盒：只包含border、padding、content区域，

填充盒：只包含padding、content区域，

内容盒：顾名思义就是只包含content区域。

常规盒模型和IE盒模型的区别：

• 在常规盒模型中，设置了的宽度和高度时。增加内边距、边框和外边距时不会影响内容区域的尺寸，但是会增加该盒子的的总尺寸。

• 在IE盒模型中，设置了的宽度和高度时。增加内边距、边框和外边距时只会在给定的尺寸内展示，盒子的总尺寸是不会增加。