盒模型四层结构

每个可布局元素都可以从内容区、内边距、边框和外边距四层理解。width 与 height 默认描述内容区，内边距和边框会继续向外增加占用空间，外边距决定它与邻居的距离。

.card {
  width: 240px;
  padding: 16px;
  border: 2px solid #999;
  margin: 24px;
}

在默认盒模型下，水平占用宽度是 240 + 16×2 + 2×2 = 276px，外边距不属于盒子自身宽度，却会影响布局中的间隔。box-sizing 会改变宽高属性的计算边界，但不会让外边距进入宽度。

实验与练习

创建上述卡片，在 Computed 面板记录 content、padding、border 和 margin 的实际值。改变文字长度和边框宽度，解释哪个数值改变了元素自身宽度，哪个只改变了外部间距。

可运行微实验：先测量再改变约束

把示例放入 320px 宽的容器，打开 Computed/Layout 面板记录 content、padding、border、margin、主轴尺寸和网格线。每次只改变一个属性：box-sizing、min-width、flex-basis、grid-template-columns 或定位方式。记录元素自身尺寸、邻居位置和是否溢出，解释是哪条约束改变了结果。

常见错误

• 只看 width，忽略 padding 和 border。
• 认为 margin 属于元素的内部尺寸。
• 用负 margin 掩盖没有理解布局关系的问题。

继续阅读

下一篇改变宽高属性的计算边界：标准盒模型与 IE 盒模型。

练习

1. 用最小输入复现“盒模型四层结构”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案