border-width 默认使元素变大，因width/height仅控制内容区，边框额外增加；box-sizing: border-box可让宽高包含边框和内边距；outline不占布局空间但影响视觉，需重置；动态修改border-width宜用透明边框占位或transform模拟。
border-width 会让元素变大，这是默认行为
元素的 width 和 height 默认只控制内容区尺寸，border-width 会额外加在内容区外面。比如设了 width: 200px 和 border: 5px solid #000，实际占用水平空间就是 200 + 5 + 5 = 210px —— 左右 border 各占 5px。
用 box-sizing: border-box 强制包含边框
这是最直接有效的解法：让 width 和 height 包含 padding 和 border，不再“溢出”。几乎所有现代项目都应默认设置：
*, *::before, *::after {
box-sizing: border-box;
}
注意点：
-
box-sizing不继承，必须显式设置到目标元素或用通配符统一处理 - 旧版 IE8+ 支持，但 IE7 及更早不支持（如需兼容，得用 JS 模拟或放弃精确控制）
- 设置了
border-box后，若再调大border-width，内容区会自动压缩，而不是整体撑开
border-width 为 0 时仍可能影响布局？检查是否用了 outline
有时删掉 border 后布局还在跳动，很可能是 outline 在作怪 —— 它不参与盒模型计算，但会渲染在元素外层，可能覆盖相邻元素或触发重排。
立即学习“前端免费学习笔记（深入）”；
-
outline常见于:focus 状态，比如按钮获得焦点时浏览器默认加的虚线框 - 它不会改变元素尺寸，但会视觉上“变厚”，尤其在缩放或高 DPI 屏幕下更明显
- 解决方式是显式重置：
outline: none或outline: 2px solid transparent（保留可访问性焦点指示）
动态改 border-width 时布局抖动，怎么平滑处理
直接修改 border-width 会触发 layout（重排），尤其在列表或网格中容易造成相邻元素位移。避免抖动的关键不是“加 transition”，而是提前预留空间：
- 用透明边框占位：
border: 5px solid transparent，hover 时只改border-color - 或用
outline模拟边框效果（它不影响布局） - 若必须改粗细，搭配
transform: scale()或clip-path做视觉模拟，避开盒模型变更
真正难处理的不是 border 本身，而是它和 margin/padding/float/flex gap 等多个尺寸机制混用时的隐式交互 —— 这类问题往往要靠 DevTools 的 Layout 面板逐层关闭渲染层来定位。
