HTML & CSSWork

标准盒模型和 box-sizing: border-box 有什么区别？什么时候该用？

默认 content-box 下宽高只算内容区；border-box 把 padding 和 border 算进宽高，布局更直观、栅格更好对齐。

box-modellayoutcss

Updated Mar 30, 2026

短答案

content-box：width/height 只管内容，padding、border 会往外长。 border-box：width/height 包含 content+padding+border，总占位更可预期。做组件、栅格、响应式时一般全局设 border-box 更省心。

卡片定宽 320px，加了 padding 后整行被撑破；或两列布局百分比相加「理论上 100%」却仍换行。