边框默认占用额外空间是因为 content-box 模型下 width/height 仅含内容区，padding 和 border 会额外增加尺寸；改用 box-sizing: border-box 可使设定宽高包含 padding 和 border，内容区自动收缩，margin 不受影响。
边框默认会增加元素的总尺寸，导致布局错乱或超出预期宽度。解决办法是用 box-sizing: border-box，让边框和内边距包含在设定的宽高之内。
为什么边框会占用额外空间
默认的盒模型（box-sizing: content-box）下，元素的 width 和 height 仅指内容区域大小。一旦设置 padding 或 border，浏览器会在内容区域之外再叠加这些值，实际占用空间 = width + padding×2 + border×2。
例如：width: 200px; padding: 10px; border: 5px solid #000;，元素实际宽度为 200 + 20 + 10 = 230px。
用 border-box 让边框“向内缩”
将盒模型改为 border-box 后，设定的 width 和 height 就代表整个盒子的最终尺寸，内边距和边框会从这个尺寸里“扣除”，内容区自动收缩。
立即学习“前端免费学习笔记（深入）”；
- 写法：
box-sizing: border-box; - 推荐全局重置：
* { box-sizing: border-box; }（注意性能影响较小，现代项目普遍采用） - 兼容性好，IE8+ 均支持，无需前缀
配合 rem / 百分比布局更稳
当使用响应式单位（如 rem、%）时，border-box 能避免因边框导致的换行、溢出或对不齐问题。
- 按钮固定宽高 + 边框？直接设
width: 120px; height: 40px; box-sizing: border-box;，加border: 2px不会撑大 - 栅格列等分？
flex: 1; box-sizing: border-box;确保带边框的子项仍严格填满容器 - 表单控件统一高度？设
height: 36px; padding: 8px; border: 1px solid #ccc;，启用border-box后所有输入框视觉高度一致
注意 margin 不受 box-sizing 影响
box-sizing 只控制 width/height 与 padding/border 的关系，margin 始终在盒子外部，不影响尺寸计算。
如果整体间距仍超预期，检查是否误用了过大的 margin，或父容器 overflow: hidden 遮挡了外边距——这和 box-sizing 无关，需单独调整。
