根本原因是border默认不参与width/height计算（box-sizing: content-box），导致总尺寸=内容宽高+2×border，易撑破容器；推荐统一设box-sizing: border-box实现所见即所得。
加了 border 之后布局变乱，根本原因在于：border 是盒模型中真实占用空间的一部分，但它默认不参与 width/height 的计算（除非你用了 box-sizing: content-box —— 这是浏览器默认值）。也就是说，你设了 width: 200px，再加 border: 5px solid red，最终元素总宽度就变成 200px + 2×5px = 210px，容易撑破容器或破坏对齐。
border 占位的两种模式要分清
关键在 box-sizing 属性：
- content-box（默认）：width/height 只算内容区，padding 和 border 都额外加在外面 → 容易“意外变宽”
- border-box（推荐）：width/height 包含内容区 + padding + border → 设置即所得，布局更可控
加 border 后布局错位的常见场景
这些情况最常暴露 border 占位问题：
- 并排的 div 设了相同 width，但一个有 border、一个没 border → 宽度实际不等，换行或错位
- 表格单元格加了 border，但没设
border-collapse: collapse→ 边框双倍叠加、间距异常 - 圆角容器（
border-radius）里子元素有 margin 或默认边距，border 一加，间隙更明显，视觉上像“多出一条线” - flex/Grid 容器内子项设了 border，却忘了 border 会增加实际尺寸，导致 flex-basis 计算偏差
快速稳定布局的实用做法
不用反复调 width，从根上控制尺寸逻辑：
立即学习“前端免费学习笔记（深入）”；
- 全局重置：
* { box-sizing: border-box; }—— 所有元素统一按“所见即所得”计算尺寸 - 表格边框合并：
table { border-collapse: collapse; }，再统一给th, td { border: 1px solid #ccc; }，避免双线和空隙 - 圆角容器内消间隙：
h1, p { margin: 0; }+ 父容器overflow: hidden;，防止 border-radius 裁剪失效 - 需要精确等宽排列时，用
flex: 0 0 calc(50% - 2px);（减去左右 border 总宽），比硬写 width 更可靠
顺便提醒一个隐藏陷阱
当父容器设置了 padding，又给子元素加 border，而子元素用了 width: 100%（且仍是 content-box），那它就会溢出父容器——因为 100% 是按父 content width 算的，没算父 padding，更没算自己 border。解决方法：改用 border-box，或把子元素设为 width: 100%; box-sizing: border-box;。