width 320 + padding 16×2 + border 2×2 + margin 16×2
padding 和 border 被算进 320px，border-box 宽度仍是 320px；含 margin 占用 352px，在 360px 轨道内。
产品与设计 · 布局基础
盒模型Box Model
理解 content、padding、border、margin 的尺寸计算，并用 box-sizing 控制声明宽度是否包含 padding 与 border。
修复一张撑破轨道的 320px 卡片
设计稿的 320px 卡片加上 padding、border 与 margin 后，已经越过 360px 轨道。先点「改为 border-box 修复」：卡片物件自身的红色溢出标记、占用宽度和 content 区会同时改变；需要追查数字时再展开细调。
任务：设计稿写着 width: 320px、padding: 16px、border: 2px、margin: 16px；让它放回 360px 轨道，不牺牲内边距。
网格轨道 360px轨道右边界
margin 16×2
border-box 356pxcontent 320px溢出 +28px
细调四层尺寸（用于复现溢出）
溢出 +28px。 声明 320px，加 padding/border 后 border-box 实际 356px，含 margin 占用 388px，超过 360px 轨道。下一步：切 border-box，或降 padding/border、缩 width。
从刚才的演示能读出什么
演示里的四个数字对应盒模型的四层与两种尺寸算法。
- 四层从内到外：content（内容）→ padding（内边距）→ border（边框）→ margin（外边距）。演示里就是从字到外圈的四个环。
- content-box：声明的 width 只算 content。padding 和 border 往外长，border-box 宽度 = width + 左右 padding + 左右 border，再加左右 margin 才是占用空间，最容易撑破网格。
- border-box：声明的 width 已包含 content + padding + border。切过去时卡片外框立刻缩回声明宽度，content 区从 width 里扣除。
- margin 永远在外面：margin 不进 width，只把邻居推开；它改的是占用空间，不是盒子自己的边框宽度。
什么时候用哪种
按「声明宽度要不要被 padding/border 改写」来选，不靠手感。
- 选 border-box：卡片、表单输入、网格单元、响应式组件——只要加了 padding/border 还想让声明宽度撑不破轨道。
- 选 content-box：需要精确控制 content 区像素时，例如画布、固定字号文本块、要做尺寸相减的容器。
- 不要用 padding 当布局间距：页面级区块之间的距离用 margin 或间距系统（space），padding 留给组件内部留白。
怎么用：从声明到不溢出
四步把一张卡片的尺寸说清楚，不靠「看起来没溢出」。
- 声明 width 和 box-sizing（组件默认 border-box）。
- 算 border-box 宽度，再加左右 margin 得到占用空间。
- 把占用空间对比可用的网格轨道，判断是否溢出。
- 溢出就降 padding/border、缩 width，或改 box-sizing；margin 用来调外部间距。
正反例：同一张 320px 卡片
只改 box-sizing 一处，看它是否撑破 360px 网格。
同样 width 320 + padding 16×2 + border 2×2 + margin 16×2
padding、border 往外长，border-box 宽度变成 356px；含 margin 占用 388px，撑破 360px 轨道 28px。
快速自测
同一张卡片 width: 320px、padding: 16px、border: 2px、margin: 16px，放进 360px 网格。从 content-box 改成 border-box 后，占用宽度（含 margin）变成多少？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。