什么是盒模型？标准盒模型和 IE 盒模型有什么区别？

盒模型描述每个元素在布局中占据的空间，由内到外依次是：content（内容）、padding（内边距）、border（边框）、margin（外边距）。区别在于 width/height 的计量范围：

• 标准盒模型（box-sizing: content-box，默认）：width 只指内容宽度，元素实际占位宽度 = width + padding + border；
• IE 盒模型（box-sizing: border-box）：width 包含 content + padding + border，加内边距不会撑大盒子，更好控制尺寸。

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* 实际渲染宽度仍是 200px，内容区被压缩为 150px */
}

现代开发普遍通过 *, *::before, *::after { box-sizing: border-box } 统一使用 border-box。易错点：margin 不属于 width 计算范围，且垂直方向相邻元素的 margin 会发生折叠（取较大者）。追问方向：margin 折叠的条件与 BFC 如何阻止折叠、box-sizing 是否继承（不继承，需显式设置）。