outline不占用空间是其核心特性，它渲染在边框外、不参与盒模型计算，不影响元素尺寸和布局；而border属于盒模型，会改变元素宽高及相邻元素位置。
outline 不占用空间是它的核心特性，不是 bug，也不需要“修复”；真正要处理的是你误把它当 border 用时引发的布局错乱。
为什么 outline 设置了却“看不见尺寸变化”
因为 outline 渲染在元素边框之外、不参与盒模型计算，浏览器不会重排（reflow），也不会改变元素的 width/height 或影响相邻元素位置。而 border 是盒模型的一部分，加 2px 就会让元素总宽高多出 4px（上下/左右各 2px）。
- 常见错误现象：给按钮加
outline: 2px solid blue后发现它没“撑开”容器，文字也没被挤开——这是对的，outline 就该这样 - 真实使用场景：调试时临时标出某个
div边界，或实现 focus 状态高亮，又不想破坏现有布局 - 关键区别：你不能靠
outline来“占位”或“预留空间”，它没有outline-top这类单边属性，也不能设置outline-offset为负值后让内容自动避让（它只是视觉上向内偏移，不影响布局流）
什么时候该用 border 而不是 outline
当你需要明确控制元素所占空间、希望边框参与布局计算、或需四边差异化设置时，border 是唯一选择。
- 比如表单输入框：用
border而非outline实现 hover 下划线效果，否则下划线会“飘”在文本下方、不随字体大小缩放 - 比如卡片组件：若用
outline模拟边框，卡片内margin或padding的计算基准就和视觉不符，后续加阴影或浮动容易错位 - 参数差异：
border支持border-top-width、border-left-style等独立控制；outline只能整体设置outline-width/outline-style/outline-color，且必须先设outline-style才能生效其他属性
outline + box-sizing 组合使用的真实风险
有人试图用 outline 替代 border 避免盒模型溢出，再配合 box-sizing: border-box ——这反而制造隐性问题。
- 性能影响：虽然
outline不触发 reflow，但频繁切换 focus 状态下的outline（如大量可 tab 的表单项）仍可能引起 repaint 波动，尤其在低端设备上 - 兼容性陷阱：Firefox 下
outline可能渲染为非矩形（比如聚焦到带圆角的按钮时轮廓仍是直角矩形），而border-radius对outline完全无效 - 最易忽略的一点：当父容器设置了
overflow: hidden，过大的outline（如outline: 999px solid #000）会被直接裁剪，但开发者常误以为是 z-index 或 stacking context 问题，浪费大量排查时间
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
