用border和margin/padding是理清页面模块层级最直接有效的方式：border勾勒轮廓作结构透视镜，margin明确模块间距，box-sizing和max-width控制占地范围，outline或box-shadow可非侵入式调试。
用边框（border）和间距（margin/padding）是快速理清页面模块层级最直接、最有效的方式。视觉边界比颜色或字体变化更明确，能立刻告诉用户“这是独立的一块”，也能帮开发者一眼识别结构嵌套是否合理。
用 border 勾勒模块轮廓，避免“看不见的盒子”
很多模块默认没有边框，导致多个 div 堆叠时像一整块灰板，看不出哪是头部、哪是卡片、哪是侧边栏。临时加一层浅色边框（比如 border: 1px solid #eee;），不是为了上线，而是调试阶段的“结构透视镜”。
- 对每个语义化容器（
header、section、.card、.sidebar）都加统一风格的临时边框 - 用不同颜色区分层级：外层用浅灰，子模块用稍深一点的灰（如
#ddd），组件级用#ccc，方便一眼看出嵌套深度 - 上线前批量删掉或用 css 预处理器/构建工具自动移除（例如用
[data-debug]属性控制）
用 margin 划分模块间距，而不是靠 padding 挤出来
模块之间该有呼吸感，但错误做法是给内部元素加大量 padding 来“撑开距离”。这会让内容区域变窄，且父子关系模糊。正确逻辑是：模块自身用 margin 主动声明“我和邻居保持多远”。
- 统一定义模块间垂直间距，比如
.module { margin-bottom: 24px; }，最后一项可加:last-child { margin-bottom: 0; } - 避免同时在父容器设
padding和子模块设margin，容易叠加错乱；优先让子模块自己管好外部距离 - 水平模块（如并排卡片）用
margin-right+:last-child清除，比用负 margin 或 flex gap 更可控（尤其兼容老浏览器时）
结合 box-sizing 和 max-width 控制模块“占地范围”
边框和间距会改变元素实际尺寸，若没设 box-sizing: border-box，加个 1px border 就可能撑破容器；而无限宽的模块（如 width: 100%）在响应式下也容易挤占布局。
立即学习“前端免费学习笔记（深入）”；
- 全局重置：
* { box-sizing: border-box; }，让 width 包含 border 和 padding - 主内容区加
max-width: 1200px+margin: 0 auto，避免模块横向拉满后失去层次 - 卡片、表单等独立模块显式设
width或flex-basis，配合 margin 形成清晰栅格节奏
进阶：用 outline 或 box-shadow 做非侵入式调试
如果怕 border 影响原有样式（比如破坏圆角、覆盖背景图），可用 outline 替代——它不占空间、不触发重排；或者用内阴影 box-shadow: inset 0 0 0 2px #007bff 突出内容区边界。
-
outline不影响布局，适合快速高亮当前 hover 的模块 -
box-shadow可叠加多层（如外描边 + 内发光），适合演示“模块浮起”状态 - 搭配 CSS 自定义属性（
--debug-border: 2px solid #007bff;）一键开关调试模式