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 像一层“贴纸”，画完就完，不影响布局流：
-
border改变元素实际占据空间，可能挤开兄弟元素或导致父容器高度变化 -
outline只影响绘制（paint）阶段，兄弟元素完全感知不到它的存在 -
outline不支持单边设置（如outline-top），也不能设为圆角（outline-radius不存在）
什么时候 outline 会“看起来”影响布局
常见错觉来源不是 outline 本身，而是它暴露了其他问题：
- 焦点 outline 触发时，元素因
overflow: hidden被裁切，误以为是 outline 撑开了什么 - 使用
outline-offset后，负值（如outline-offset: -2px）让 outline 向内偏移，可能覆盖内容，造成视觉干扰 - 某些旧版 Safari 对
outline渲染有 bug，会在 inline 元素上意外引发换行（已基本修复）
调试 outline 布局影响的实操建议
真要确认它是否“动了布局”，别靠眼睛看，用 DevTools 直接验证：
- 选中元素 → Elements 面板 → 右侧 Styles 标签页，临时删掉所有
outline相关声明，观察 Layout 边框（蓝色虚线）是否缩放 - 打开 Rendering 面板（Chrome），勾选 “Layout Shift Regions”，然后 tab 切换焦点，如果没高亮区域，说明 outline 确实没触发位移
- 避免用
outline: 2px solid #007bff调试，改用outline: 2px dashed red——虚线更容易看出是否压到文字或相邻元素
真正容易被忽略的是：当用 outline 实现自定义焦点样式时，如果同时设置了 outline-offset 和 transform: scale()，两者的叠加偏移可能让焦点框“飘”出预期位置，这时得手动用 translate 补偿——outline 本身不占空间，但人眼对齐的参照物是会动的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
