html标签的盒子模型介绍

盒子模型，这主要是针对像div等块标签而言，是拿生活中的实物形象比喻。
1.盒子模型
在html标签中div和div中的内容，可以比喻成生活中一个锦盒，并且这个大的盒子里还装着一个小盒子中情景。
首先这个盒子是有边框的，至于边框多厚就看是什么盒子了，其次，小盒子并不是硬生生的噻进大盒子的，而是留有空隙
的放进大盒子中，这就是是大盒子的内边距，也就是指与大盒子边框内侧多远的范围才允许放东西。所在这个生活的情景中，
就可以提炼出div盒子模型的两个属性 边框border 内边距padding.
在html文档中，还存着两个div并排放在一起，就好像生活中两个锦盒并排放在一起，而这两个盒子之间的距离，称之为外边距
是指一个盒子边框外侧多元距离才能放另一个箱子。提炼成div盒子模型，就是div的外边距margin

如图所示：

2.内外边距，边框设置方式
同时我知道在生活中的盒子 无论是边框，外边距，内边距都是上左下右四个部分的，同理div盒子模型也是一样的。
在指定div的边框，外边距或者内边距可以直接设定相同的值如 margin：10px 表示外边距上右下左四个部分的值都是10px
也可以单独对上右下左四个部分一一赋值 如 margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px
也可以这样一次性赋值margin:10px 10px 10px 10px; 其依次的顺序是上右下左。边框和内边距同理。

3.div盒子模型的实际占的空间大小
水平方向：左外边距+左边框+左内边距+width+右内边距+右边框+右外边距
垂直方向：上外边距+上边框+上内边距+width+下内边距+下边框+下外边距

4.div的width和height指的空间是指除开外边距，边框，内边距所占空间外的空间，是div用来放内容的空间。

5.垂直方向合并现象
(1)当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

(2)当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

————————————————
版权声明：本文为****博主「aozeahj」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.****.net/aozeahj/article/details/52854754