为什么CSS outline不会改变盒模型尺寸

outline 不影响盒模型尺寸，因为它绘制在边界框之外、不参与 layout 计算，不占用 width/height/padding/border/margin 任何空间，也不触发重排；而 border 是盒模型组成部分，会改变元素实际占据空间。

outline 不影响盒模型尺寸的底层原因

因为 outline 是绘制在元素「边界框之外」的装饰性线条，浏览器渲染时完全绕过 layout 阶段的尺寸计算——它不参与 width/height、padding、border、margin 任何一环，也不触发重排（reflow）。

和 border 的关键区别在哪

border 是盒模型的正式组成部分，会撑开 width（除非用 box-sizing: border-box），而 outline 像一层“贴纸”，画完就完，不影响布局流：

1. border 改变元素实际占据空间，可能挤开兄弟元素或导致父容器高度变化
2. outline 只影响绘制（paint）阶段，兄弟元素完全感知不到它的存在
3. outline 不支持单边设置（如 outline-top），也不能设为圆角（outline-radius 不存在）

什么时候 outline 会“看起来”影响布局

常见错觉来源不是 outline 本身，而是它暴露了其他问题：

1. 焦点 outline 触发时，元素因 overflow: hidden 被裁切，误以为是 outline 撑开了什么
2. 使用 outline-offset 后，负值（如 outline-offset: -2px）让 outline 向内偏移，可能覆盖内容，造成视觉干扰
3. 某些旧版 Safari 对 outline 渲染有 bug，会在 inline 元素上意外引发换行（已基本修复）

调试 outline 布局影响的实操建议

真要确认它是否“动了布局”，别靠眼睛看，用 DevTools 直接验证：

1. 选中元素 → Elements 面板 → 右侧 Styles 标签页，临时删掉所有 outline 相关声明，观察 Layout 边框（蓝色虚线）是否缩放
2. 打开 Rendering 面板（Chrome），勾选 “Layout Shift Regions”，然后 tab 切换焦点，如果没高亮区域，说明 outline 确实没触发位移
3. 避免用 outline: 2px solid #007bff 调试，改用 outline: 2px dashed red——虚线更容易看出是否压到文字或相邻元素

真正容易被忽略的是：当用 outline 实现自定义焦点样式时，如果同时设置了 outline-offset 和 transform: scale()，两者的叠加偏移可能让焦点框“飘”出预期位置，这时得手动用 translate 补偿——outline 本身不占空间，但人眼对齐的参照物是会动的。