outline 不属于盒模型，它是独立于盒模型的绘制层，不参与尺寸计算和布局流，仅作为视觉装饰层绘制在 border 外侧、margin 区域内，且不占用任何空间。
outline 不属于盒模型，这是由 W3C 盒模型规范明确定义的
从 CSS 标准定义出发，outline 是一个**独立于盒模型（Box Model）的绘制层**，它既不参与尺寸计算，也不影响布局流。盒模型只包含 content、padding、border、margin 四个层级；而 outline 被明确排除在外——它被画在 border 外侧、margin 区域内，但**不占用任何盒模型空间**。
为什么设置 outline 后元素位置和大小完全不变？
因为浏览器在布局阶段（Layout phase）完全忽略 outline 的存在：
-
width和height计算时，不包含outline-width - 相邻元素的
margin塌陷、flex分配、grid占位等行为，均不受outline影响 - 即使
outline-width: 50px，元素仍按原始尺寸参与排版，只是视觉上“多了一圈”
div {
width: 200px;
height: 40px;
border: 2px solid #333;
outline: 15px solid red;
margin-bottom: 10px;
}
/* 下方元素会紧贴这个 div 的 border 底边，而不是 outline 底边 */
outline 和 border 在盒模型中的角色差异
border 是盒模型的正式组成部分，它的宽度会直接计入元素总尺寸（除非使用 box-sizing: border-box）；而 outline 是「装饰性覆盖层」，类似 Photoshop 里的外发光图层——看得见，但不影响底层结构。
-
border支持单边控制（border-top）、圆角（border-radius）、虚线样式（border-style: dashed） -
outline只能整体设置，不支持outline-top，outline-radius不存在，且outline-style: dashed在旧版 Safari 中可能回退为solid -
outline-offset可微调轮廓与边框的距离，border没有对应属性
调试或无障碍场景下误用 outline 的典型坑
开发者常因「看起来像边框」而用 outline 替代 border，结果引发两类问题：
- 用
outline做卡片分隔线 → 滚动时可能被遮挡（因z-index行为不稳定，且不参与 stacking context 计算） - 为表单控件
:focus移除outline: none后未提供替代焦点样式 → 违反 WCAG 2.4.7 焦点可见性要求，损害可访问性 - 在
transform或clip-path元素上加outline→ 渲染位置可能异常（因 outline 基于原始几何边界绘制，不响应变形）
真正需要「不扰动布局的临时高亮」时，outline 才是正确选择；其他情况，请优先用 border 或 box-shadow。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
