前端Wiki/词条/box-sizing

box-sizing

定义改变 CSS 盒模型尺寸计算方式的属性，决定 width/height 是否包含内边距与边框

默认 content-box（内容盒）下，设置 width: 300px 时元素实际占地 300 + padding + border，布局计算非常反直觉。改为 border-box（边框盒）后，width/height 就是元素的最终外尺寸，padding 和边框向内挤压内容。

因此现代项目几乎全局统一 box-sizing: border-box，这已是事实标准。响应式布局里百分比宽度 + border-box 才能算对账。

CSS

*, *::before, *::after { box-sizing: border-box; }

.card { width: 100%; padding: 16px; border: 1px solid #ccc; }
/* border-box 下总宽就是 100%，不会溢出 */

⚠ 常见误区