盒子模型（下）

导图

**一.<div>和<span>标记**

1.<div>标记
简单而言就是一个区块容器标记，可以将网页分割为独立的，不同的部分，以实现网页的规划和布局。
此标记为双标签，之间可以容纳段落，标题，表格，图像等多种网页元素。
也就是说大多数HTML标记都可以嵌套在此标记中，<div>中还可以嵌套多层<div>。
2.<span>
此标记为行内元素，双标签，之间只能包含文本和多种行内标记，可以进行嵌套。
此标记常用于定义网页中某些特殊显示的文本，配合class属性实现。

二.块元素垂直外边距的合并

1.相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时 ，如果上面的元素有下外边距，下面的元素有上外边距，则它们之间的垂直边距是两者较大者，这就叫相邻块元素垂直外边距的合并（也称外边距塌陷）。
2.嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中较大的，即使父元素上外边距为0，也会发生合并。
如果希望不合并，可以为父元素定义1像素的上边框或上内边距。