用 CSS 给页面一点性格

先找到要修改的元素

选择器告诉浏览器样式要应用到哪里。p 会选择所有段落，.note 会选择带有 note 类名的元素。尽量用容易理解的类名，让样式表达内容的用途。

.note {
  color: #26382f;
  background: #f1f5ed;
  padding: 24px;
  border-radius: 16px;
}

理解盒模型

每个元素都可以看成一个盒子：内容位于中心，padding 是内容到边框的距离，border 是边框，margin 是盒子外面的间距。使用 box-sizing: border-box 可以让声明的宽度包含内边距与边框。

让布局适应屏幕

Flexbox 适合一维排列，Grid 适合行列布局。用媒体查询在窄屏时减少列数；限制正文行宽，并留出足够行距。不要只在自己的电脑尺寸上查看页面。

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 700px) {
  .cards { grid-template-columns: 1fr; }
}