相对定位与绝对定位

相对定位保留元素在文档流中的原位置，并能成为绝对子元素的包含块。绝对定位元素退出普通流，通常相对最近的非 static 祖先定位。因此常见组合是父元素 relative、角标 absolute。

先读懂一条规则

CSS 声明写成 属性: 值;。分号表示一条声明结束，大括号把属于同一选择器的声明放在一起。浏览器会从上到下读取规则；当多条规则匹配同一元素时，会根据选择器、来源和先后顺序决定最终样式。

<figure class="photo">
  <div class="placeholder">Photo</div>
  <figcaption>Mountain trail</figcaption>
  <span class="count">3 photos</span>
</figure>

.photo { position: relative; max-width: 320px; margin: 0; }
.placeholder { height: 170px; display: grid; place-items: center; background: #bae6fd; }
.count { position: absolute; top: 10px; right: 10px; padding: 5px 8px; background: #0f172a; color: white; }

修改 CSS 时一次改变一个值，并观察文字、颜色、尺寸或位置的变化。这样能把“哪条声明造成了哪个结果”对应起来。开发者工具中看到的样式也来自同样的匹配过程。

编写时的检查顺序

• 先确认选择器能匹配目标 HTML 元素。
• 再检查属性名、冒号、值和分号是否完整。
• 最后检查窄屏、长文字和键盘操作下是否仍然清楚。

容易混淆的地方

CSS 不会改变 HTML 的含义，只改变呈现和布局。不要为了获得某种外观而换成含义错误的 HTML 标签。颜色、字号和位置也要以可读性为先。

<figure class="photo">
  <div class="placeholder">Photo</div>
  <figcaption>Mountain trail</figcaption>
  <span class="count">3 photos</span>
</figure>