outline 不参与盒模型，不占布局空间，绘制在 border 外，用于聚焦提示、调试或替代边框，结合 outline-offset 可调整视觉距离，不影响元素尺寸与页面结构。
在网页设计中，outline 属性常被用来突出显示元素，特别是在可访问性和调试布局时非常有用。它与盒模型的关系容易被误解，因为它不参与盒模型的尺寸计算，也不会影响其他元素的布局位置。
理解 outline 与盒模型的关系
标准的 CSS 盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。而 outline 是绘制在 border 外部的一条线，不属于盒模型的一部分。这意味着：
- 设置 outline 不会改变元素的 width 或 height
- outline 不占据空间，不会影响兄弟或父级元素的布局
- 即使 outline 很宽，元素的实际尺寸仍由 content + padding + border 决定
如何结合使用 outline 和盒模型
虽然 outline 不参与布局，但可以合理利用它增强视觉效果而不破坏页面结构。常见使用场景包括：
- 聚焦状态提示：为输入框或按钮添加 focus 状态的高亮轮廓
- 调试布局：临时用 outline 查看元素实际范围，避免干扰 margin/padding 的表现
- 替代边框：需要加边框但不想影响布局时，可用 outline 替代 border
示例代码：
立即学习“前端免费学习笔记（深入）”；
input:focus {
outline: 2px solid #007acc;
outline-offset: 1px; /* 控制轮廓与边框的距离 */
}
.debug-element {
outline: 1px dashed red;
}
注意 outline-offset 的作用
outline-offset 属性可以控制 outline 距离边框的距离。正值让轮廓远离元素，负值则向内偏移（可能覆盖边框）。这个属性对布局依然无影响，但能改善视觉呈现。
- 当元素有圆角（border-radius）时，outline 通常是矩形，不受圆角影响
- 若希望“外框”也带圆角，需使用 box-shadow 模拟而非 outline
- 在设计焦点样式时，建议设置 outline-offset 避免与边框粘连
基本上就这些。掌握 outline 不占布局空间这一特性，就能灵活地将其用于视觉增强，同时保持盒模型的稳定性。
