CSS 学习笔记（二）— 页头与布局

2026-06-21

继续读 css/style.css。这一部分讲页头 .site-header、内容区宽度和 flex 布局。对应 HTML 在 index.html 第 10～18 行。

class 选择器

之前学过标签选择器（如 body、a），选中所有同名标签。class 选择器用点开头，只选中贴了对应 class 的元素：

• HTML：class="site-header"
• CSS：.site-header

1. 页头外观（第 25～28 行）

.site-header {
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
}

• border-bottom — 底边：1 像素、实线、浅灰，和正文区分开
• background: #fff — 白底；body 是浅灰，顶栏更亮一块

页头横贯整行，所以样式写在 .site-header 上，而不是内层的 .inner 上。

2. 内容宽度居中（第 30～36 行）

.site-header .inner,
main,
.site-footer .inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

逗号表示三个选择器共用同一组样式。顶栏内容、正文、页脚内容因此同宽、对齐。

后代选择器：.site-header .inner

中间的空格表示「在 .site-header 里面的 .inner」，不是两个 class 贴在一起。

• max-width: 680px — 最宽 680 像素，大屏不会拉太宽
• margin: 0 auto — 上下外边距 0，左右自动，块水平居中
• padding: 0 1.25rem — 左右内边距，窄屏时文字不贴边

3. 页头内部横排（第 38～44 行）

.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

只针对页头里的 .inner，在「同宽居中」之外再加布局：

• display: flex — 变成 flex 容器，子元素（标题 + 导航）横排
• align-items: center — 竖直方向居中对齐
• justify-content: space-between — 标题在左、导航在右，中间留空
• padding-top / padding-bottom — 页头上下留白，不会太扁

本节小结

• class 选择器 — .名字，比标签选择器更精确
• 后代选择器 — 空格表示「在里面」
• 逗号合并 — 多条选择器共用同一组样式
• flex 入门 — 横排、对齐、两端分布

待续

下一篇笔记：CSS 学习笔记（三）— 站点标题与导航。

← 笔记（一）