用 border 和 outline 临时加边框是盒模型嵌套调试最快捷方式：border 标 content/padding 区，outline 标 margin 区，box-shadow 可模拟单边描边，分层标记后立即删除。
盒模型嵌套深时，元素边界容易混淆，用 border 和 outline 临时加边框是最快捷的可视化排查方式——它们不改变布局、不影响尺寸计算，还能快速区分父子关系。
用 border 快速标出内容区与 padding 区
border 会占据盒模型的 border 区，但对大多数调试场景影响极小（尤其用 1px solid transparent 时几乎无干扰）。适合标记有 content/padding 的元素：
- 给目标元素加
border: 1px solid #00f;，立刻看到 content-box 边界 - 想同时看清 padding 范围？改用
border: 1px solid #00f; padding: 8px;，蓝色线紧贴内容，内边距一目了然 - 避免干扰布局：用
border: 1px solid transparent占位，配合开发者工具实时切换颜色
用 outline 独立标出 margin 区（不侵占空间）
outline 绘制在元素外层，不参与盒模型计算，也不影响 margin 折叠——特别适合观察外边距和元素实际占位：
- 加
outline: 2px dashed #f00;，红色虚线会绕在 margin box 外侧，清晰暴露“它到底推开了谁” - 父容器加 outline + 子元素加 border，能直观对比 margin 是否塌陷、是否被父容器裁剪
- 注意：outline 不支持圆角和单边设置，如需更精细控制，可临时改用
box-shadow: 0 0 0 2px #f00;
组合使用，分层识别嵌套结构
多层嵌套时，按层级赋予不同样式，形成视觉层次：
立即学习“前端免费学习笔记（深入）”；
- 最外层容器：
outline: 2px solid #000;（粗黑，锚定整体） - 中间层区块：
border: 1px solid #00a;（深蓝，标 padding/content） - 最内层元素：
box-shadow: 0 0 0 1px #f50;（橙色描边，轻量且可单边模拟 margin） - 调试完立刻删掉这些样式，或统一写在临时 style 标签里，避免污染正式 CSS
基本上就这些。不需要装插件、不用记复杂命令，敲两行 CSS 就能让隐藏的盒模型“显形”。关键不是全加，而是哪一层卡住了，就给哪一层加对应标记——简单直接，不复杂但容易忽略。
