两个元素之间的 CSS 盒模型 变化？
1 CSS 盒模型（一个元素）
CSS 盒模型 描述了 一个元素 的 结构，由四个区域组成：
- 内容区（content）：元素的 实际内容 区域，如 文本、图片 等；
- 内边距（padding）：内容 与 边框 之间的 内边距。增加
padding会让 内容区域 变大，同时增加 元素的 总体大小； - 边框（border）：包围 内容 和 内边距 的 边框区域；
- 外边距（margin）：边框外面 的区域，用来控制 元素 与 其他元素 之间的 距离。
盒模型的大小计算
元素的总 宽度 和 高度 是由以下几部分组成的：
- 总宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距；
- 总高度 = 内容高度 + 上下内边距 + 上下边框 + 上下外边距
box-sizing 属性
标准盒模型 content-box 默认设置时，盒子的 宽度和高度（设置的 width 和 height） 只包括 内容区域，不包括 padding 和 border。如果设置了 padding 或 border，它们会 增加元素 的 总大小，因此 元素之间的 距离 可能会受到影响。
.element {
width: 200px; /* 内容宽度 */
padding: 10px; /* 内边距 */
border: 2px solid black; /* 边框 */
}
/* 结果: 总宽度 = 200px + 10px + 10px + 2px + 2px = 224px */
替代盒模型 border-box 设置时，盒子的 宽度和高度 包括 内容区域、padding 和 border。因此，设置 width 和 height 时，它会 自动计算 出合适的 内容区域尺寸，而不会让 padding 和 border 超出 设置的 宽度和高度。
.element {
box-sizing: border-box;
width: 200px; /* 总宽度 */
padding: 10px; /* 内边距 */
border: 2px solid black; /* 边框 */
}
/* 结果: 总宽度 = 200px (包含 padding 和 border) */
2 两个元素之间的盒模型
当两个元素之间的 盒模型 发生变化时，这些变化可能会 影响 元素的 尺寸、对齐方式、间距 等。下面是需要特别注意的几个点：
2.1 元素之间的 margin 计算
元素的 外边距（margin） 是 元素与其他元素 之间的 间距。如果两个元素的 外边距 重叠，通常会使用 “外边距合并（margin collapse）” 规则，合并后的间距 是 两个外边距中 较大的 那个，而不是 两个相加，通常这种情况发生在 垂直方向上。
- 相邻的块级元素（如
<div>、<p>等）； - 父元素 与 第一个 或 最后一个 子元素；
- 多个子元素的外边距：如果子元素 没有其他 内容或元素 分隔；
- 空元素
.element1 {
margin-bottom: 20px;
}
.element2 {
margin-top: 15px;
}
/* 合并后的间距 = max(20px, 15px) = 20px */
2.2 padding 与 margin 的相互关系
如果你设置了元素的 padding 和 margin，需要注意它们 对其他元素的影响，尤其是在 布局过程中。padding 会增加 元素的尺寸，而 margin 会影响 相邻元素 之间的 距离。
- 如果一个元素的
padding值比较大，它会影响 容器内 其他元素的 布局； - 如果两个 相邻的元素 有较大的 外边距，则它们之间的 距离会增大，影响 整个 页面的 结构。
2.3 子元素的盒模型变化对父元素的影响
- 如果 父元素的大小 是由 子元素的内容 （即父元素的
box-sizing为默认content-box）决定的，那么子元素的padding、border和margin可能会影响 父元素的 总尺寸； - 如果父元素的
box-sizing设置为border-box，则子元素的padding和border不会增加 父元素的 实际尺寸。
2.4 百分比宽度和高度的行为
当元素的 宽度或高度 是 百分比时，它通常是相对于其 父元素的 宽度或高度 进行计算的。因此，父元素的 内边距、边框 和 外边距 可能会影响 子元素的尺寸，尤其是在 标准盒模型（box-sizing 为默认 content-box） 下。
