outline 不影响盒模型，它绘制在边框外且不占用布局空间。例如设置 10px outline 的 100px 元素仍为 110px 宽，常用于 focus 提示、调试和高亮，配合 outline-offset 可避免重叠，安全又灵活。
在 CSS 中使用 outline 属性时，它不会影响元素的盒模型，这一点和 border 不同。这也是 outline 的一个重要特性。
outline 与盒模型的关系
outline 是绘制在元素边框外围的一条线，用于高亮显示元素，但它不占据布局空间，也不会改变元素的 width、height 或 margin、padding 等盒模型属性。
这意味着即使你添加了很粗的 outline，页面布局也不会因此发生重排或位移。
示例：
假设有一个宽高为 100px 的 div：
立即学习“前端免费学习笔记（深入）”；
HTML:
CSS:
.box {
width: 100px;
height: 100px;
background: lightblue;
border: 5px solid blue;
outline: 10px solid red;
}
这个元素的实际占用宽度仍然是 100px + 2×5px（border）= 110px，而 10px 的 outline 完全绘制在 border 外部，不影响布局。
如何正确使用 outline
outline 常用于以下场景而不干扰布局：
- 可访问性：聚焦状态（focus）的视觉提示
- 调试元素位置（临时加 outline 查看范围）
- 自定义高亮样式，替代默认 focus 效果
推荐用法示例：
button:focus {
outline: 2px solid #005fcc;
outline-offset: 2px; /* 控制 outline 与边框之间的距离 */
}
注意点
虽然 outline 不影响盒模型，但有时会视觉上溢出容器，导致与其他元素重叠。这时可以使用 outline-offset 来调整位置。
- outline-offset: 0; —— outline 紧贴 border
- outline-offset: 4px; —— 向外偏移 4px，避免遮挡邻近内容
基本上就这些。只要理解 outline 是“画在盒子外面的线”，就知道它天然不参与盒模型计算，使用起来安全又方便。
