盒模型:box-sizing 的坑

两个盒子的 CSS 都写了 width: 200px; padding: 30px; border: 5px,但实际宽度不同。打开 F12 → Elements,选中盒子看右下角的盒模型示意,或直接用尺子量屏幕。

① content-box(默认):实际宽 = 200 + 30×2 + 5×2 = 270px(被撑大了!)

我更宽

② border-box(推荐):实际宽就是 200px,padding 和 border 往里挤

我正好 200

结论:项目里全局加 * { box-sizing: border-box; },宽度所见即所得。