加 border 后布局崩是因为默认 content-box 模式下 width 仅指内容区，padding 和 border 额外叠加，如 width: 300px + padding: 16px×2 + border: 2px×2 = 336px；必须全局设 , ::before , *::after { box-sizing: border-box; } 才能确保所有元素（含伪元素）统一按 border-box 计算，使 width 包含 padding 和 border，避免溢出、换行等错位。
直接加 border 会导致容器总宽度/高度超出预期，尤其在固定尺寸或 flex/grid 布局中必然错位——必须配合 box-sizing: border-box 才算安全。
为什么加 border 后布局会崩？
默认的 content-box 模式下，width: 300px 只管内容区；一旦加 padding: 16px 和 border: 2px solid #000，实际占用宽度变成 300px + 32px + 4px = 336px。Flex 项撑开、栅格换行、表单控件溢出，全是这个原因。
常见现象包括：
- 三列
flex: 1的卡片，最后一列莫名换行 -
input或textarea在父容器中右侧被截断 - 响应式媒体查询下，本该并排的元素开始堆叠
必须全局设置 box-sizing: border-box
只给某个容器加 box-sizing: border-box 不够——子元素若仍是 content-box，父子计算逻辑就打架。比如父容器设了 width: 100%，子元素有 padding 却没 border-box，它就会撑破父容器。
正确写法（现代项目标配）：
*,
*::before,
*::after {
box-sizing: border-box;
}
注意：* 单独写不覆盖伪元素，::before/::after 必须显式包含；否则你写的 button::after { content: ""; display: block; } 会意外变大。
为已有 padding 的容器加 border 的实操要点
即使用了 border-box，仍需检查三项：
-
padding值是否仍合理：加 border 后，内容区被进一步压缩，小字号文字可能贴边，可微调padding补偿（如从12px改为13px） - 是否误用
margin当padding：若原意是让内容“离边框远一点”，该调padding；若想拉远和其他元素的距离，才动margin - 第三方组件干扰：Bootstrap 4+ 默认设了
border-box，但某些旧版 UI 库或内联样式可能覆盖它，用 DevTools 查看 computed 样式里的box-sizing值最可靠
border 和 padding 组合时容易忽略的细节
真正麻烦的不是加 border 这个动作，而是它和 padding 共同挤压内容区后引发的连锁反应：
- 文本在窄内容区里更易触发
overflow-wrap: normal导致意外换行，需主动加overflow-wrap: break-word - 图标类
inline-block元素在 padding 较大时，底部可能留白（vertical-align 问题），不是 border 的锅，但常被误判 -
border-image或box-shadow虽不参与盒模型计算，但视觉上会“加厚”边界，设计稿验收时得连同它们一起量尺寸
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
