1
Amy 原创整理｜资料核验：2026-10-30
MDN说明，content-box下的width表示内容宽度，左右padding和border会额外增加盒子宽度；border-box则把内容、内边距与边框算进指定宽度，但仍不包括margin。
教学示例（虚构尺寸）：width: 240px、左右padding各12px、左右border各2px，使用content-box时边框外缘总宽268px；改成border-box后，总宽240px，内容区域相应缩小至212px。两种情况下外边距都要另算。
Amy建议：调试卡片越界时，在开发者工具中分别查看内容、padding、border和margin。不要先靠不断减小width来碰运气；确认盒模型，再检查父容器可用空间和其他布局约束。
官方来源：
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/box-sizing