盒模型、尺寸与间距

这一节要完成什么

用可计算的宽度和间距制作课程卡片，分清 content、padding、border 与 margin。

先理解：为什么要学它

border-box 让声明宽度包含内边距和边框。

跟着做

*,
*::before,
*::after {
  box-sizing: border-box;
}
.lesson-card {
  max-width: 42rem;
  padding: 1.5rem;
  border: 1px solid #fed7aa;
  margin-block: 1rem;
  border-radius: 0.75rem;
}

1. 在页面选一个 section 加上 lesson-card 类。
2. 先不加 box-sizing，记录 DevTools 显示的总宽度；再加入全局规则比较。
3. 分别修改 padding 和 margin，观察哪个改变卡片内部、哪个改变卡片之间。
4. 将固定 width 改成 max-width，并缩窄窗口确认内容不会溢出。

关键代码怎么读

• border-box 让声明宽度包含内边距和边框。
• 优先使用逻辑属性 margin-block，适应不同书写方向。
• 间距建立规律，比每处随意写数字更容易维护。

常见错误：看到什么，检查什么

自己完成一次

制作两张相邻卡片：它们宽度一致、内边距一致，卡片间距为 1rem；用 Computed 面板记录最终宽度。

完成检查

• 我完成了本节要求的可见结果
• 我能解释关键代码的输入、处理和输出
• 我测试了正常、边界和错误情况