Elements：页面由什么组成

跟着点一次

1. 打开本页，按 ⌘ + Option + I（Windows 按 F12）。
2. 找开发者工具左上角的“小箭头指向方框”图标，英文叫 Select element。
3. 点击图标，再把鼠标移到下面的练习卡片上。
4. 卡片出现蓝色遮罩时点击它。
5. Elements 左侧会选中 <div id="practice-card" ...>。
6. 右侧 Styles 区搜索 background，你会看到当前背景颜色。

DEVTOOLS PRACTICE TARGET

请用开发者工具找到我

把我的背景色从米黄色改成蓝色，刷新页面后我会恢复。

提示：在 Elements 中搜索 practice-card。

临时改颜色

1. 在 Styles 中点击 .practice-card 里的背景色小方块。
2. 输入 #b8d8ff，按回车。
3. 页面卡片马上变蓝，但源文件没有改变。
4. 刷新页面，米黄色恢复。

看懂盒模型

Styles 下方的方框图叫 Box Model：中心是内容，往外依次是 padding、border、margin。如果“文字离边框太近”，看 padding；如果“两张卡片靠太近”，看 margin 或父元素 gap。

文字离自己的边框太近，优先检查 padding 还是 margin？

答案：padding。它控制元素内部内容到边框的距离。