本文整理 Hexo 博客主题开发中用到的 CSS 核心知识点。

选择器

选择器 示例 含义
通配符 * { } 选中所有元素
标签选择器 body { } 选中所有 <body>
类选择器 .site-header { } 选中 class="site-header" 的元素
后代选择器 .site-nav a { } 选中 .site-nav 内部的所有 <a>
伪类选择器 .site-nav a:hover { } 鼠标悬停时的 <a>
伪元素 .category-card::before { } 在元素内容前插入虚拟元素

盒模型

每个 HTML 元素都是一个矩形盒子，由内到外四层：

1
2
3
4
5
6
7
8
9
10
┌─────────────────────────────┐
│         margin (外边距)       │
│  ┌───────────────────────┐  │
│  │    border (边框)       │  │
│  │  ┌─────────────────┐  │  │
│  │  │ padding (内边距)  │  │  │
│  │  │   内容区域        │  │  │
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘
  • margin — 元素与外部元素的距离
  • padding — 内容与边框的距离
  • border — 边框线
  • box-sizing: border-box — 让 width/height 包含 padding 和 border

布局

Flexbox 弹性布局

1
2
3
4
5
6
7
8
.container {
  display: flex;
  flex-direction: row;        /* 主轴方向: row(横向) / column(纵向) */
  justify-content: center;    /* 主轴对齐: center / space-between / flex-start */
  align-items: center;        /* 交叉轴对齐 */
  flex-wrap: wrap;            /* 换行 */
  gap: 25px;                  /* 间距 */
}

Grid 网格布局

1
2
3
4
5
6
7
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  /* auto-fill: 自动填充列数 */
  /* minmax(320px, 1fr): 每列最小320px，多余空间平分 */
  gap: 25px;
}

定位

属性值 作用
position: relative 相对自身原位置偏移
position: absolute 相对最近的定位祖先定位
position: fixed 相对浏览器窗口固定
position: sticky 滚动到阈值后粘住（如 top: 0 粘在顶部）

视觉效果

渐变背景

1
2
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
/* 参数: 角度, 颜色1 位置, 颜色2 位置 */

阴影

1
2
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
/* 参数: 水平偏移 垂直偏移 模糊半径 颜色 */

圆角

1
2
border-radius: 16px;  /* 四角统一 */
border-radius: 10px 20px 30px 40px;  /* 左上 右上 右下 左下 */

毛玻璃效果

1
2
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.9);

渐变色文字

1
2
3
4
5
.card-title {
  background: linear-gradient(135deg, #2c3e50, #3498db);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

过渡动画

1
2
3
4
5
6
7
8
.element {
  transition: transform 0.3s ease, box-shadow 0.3s;
  /* 参数: 属性名 时长 缓动函数 */
}
.element:hover {
  transform: translateY(-4px);   /* 向上移动 4px */
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

关键帧动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 定义动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 使用动画 */
.element {
  animation: fadeInUp 0.6s ease forwards;
  /* 参数: 动画名 时长 缓动 保持结束状态 */
}

动画延迟

1
2
3
.element {
  animation-delay: 0.2s; /* 延迟 0.2 秒后开始 */
}

响应式设计

1
2
3
4
5
6
/* 屏幕宽度 ≤ 768px 时生效 */
@media (max-width: 768px) {
  .category-grid {
    grid-template-columns: 1fr;  /* 改为单列 */
  }
}

伪元素高级用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 卡片悬停光效 */
.category-card::before {
  content: '';                  /* 必须有 content */
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(52,152,219,0.05), transparent);
  transition: left 0.5s;
}
.category-card:hover::before {
  left: 100%;
}

双栏布局（侧边栏 + 内容区）

用 Flexbox 实现左右分栏，左边固定宽度，右边自动填满：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.content {
  display: flex;            /* 开启弹性布局 */
  max-width: 1300px;
  margin: 0 auto;           /* 居中 */
}

.sidebar {
  width: 280px;             /* 固定宽度 */
  min-width: 280px;         /* 防止被挤压 */
}

.main-area {
  flex: 1;                  /* 占满剩余空间（相当于 flex-grow: 1） */
  min-width: 0;             /* 防止内容溢出（重要！） */
}

通俗理解：flex: 1 就像分蛋糕——侧边栏拿走固定 280px，剩下的全部给内容区。min-width: 0 是防止内容区里的长代码或长文字把布局撑破。

滚动容器 — overflow-y: auto

让一个固定高度的区域内部可以滚动：

1
2
3
4
.sidebar {
  height: calc(100vh - 78px);  /* 屏幕高度减去导航栏 */
  overflow-y: auto;            /* 内容超出时显示纵向滚动条 */
}
值 效果
overflow: visible 内容溢出也显示（默认）
overflow: hidden 超出部分隐藏（裁剪掉）
overflow: scroll 始终显示滚动条
overflow: auto 内容超出时自动显示滚动条（推荐）

通俗理解：就像一个有固定高度的抽屉，东西多了就出现滑轨让你上下翻。auto 最聪明——东西少时不显示滚动条，多了才显示。

自定义滚动条样式 — ::-webkit-scrollbar

把浏览器默认的灰色滚动条改成细条 + 圆角：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.sidebar::-webkit-scrollbar {
  width: 6px;                    /* 滚动条宽度 */
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;       /* 轨道背景透明 */
}

.sidebar::-webkit-scrollbar-thumb {
  background: #d0d0d0;           /* 滑块颜色 */
  border-radius: 3px;            /* 滑块圆角 */
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;           /* 悬停时变深 */
}
  • ::-webkit-scrollbar — 滚动条整体
  • ::-webkit-scrollbar-track — 轨道（滑块的跑道）
  • ::-webkit-scrollbar-thumb — 滑块（可拖动的那个小方块）

通俗理解：默认滚动条又粗又丑，用这三个伪元素可以把它改造成细细的、圆角的、半透明的小条。注意这招只在 Chrome/Edge 等 Webkit 浏览器有效。

折叠动画 — max-height + overflow + transition

用纯 CSS 实现点击展开/收起的折叠效果：

1
2
3
4
5
6
7
8
9
.category-post-list {
  max-height: 0;                /* 收起时高度为 0 */
  overflow: hidden;             /* 隐藏超出部分 */
  transition: max-height 0.3s ease;  /* 高度变化时加动画 */
}

.category-group.open .category-post-list {
  max-height: 600px;            /* 展开时给一个足够大的高度 */
}

通俗理解：这就像百叶窗——max-height: 0 是关窗，max-height: 600px 是开窗，transition 让开关过程平滑。注意不能直接用 height: auto 做动画（CSS 不支持），所以用 max-height 代替。

选中指示器 — border-left 高亮条

用左边框作为”当前选中”的视觉标记：

1
2
3
4
5
6
7
.category-post-item {
  border-left: 3px solid transparent;  /* 默认透明，占位但看不见 */
}

.category-post-item.active {
  border-left-color: #3498db;          /* 选中时左边出现蓝色竖条 */
}

通俗理解：就像书签——平时看不见，选中时左边冒出一条蓝线，告诉你”你正在看这篇”。用 transparent（透明）占位是为了避免选中时布局抖动。

粘性定位实战 — position: sticky

让侧边栏跟随页面滚动，但始终不超出屏幕：

1
2
3
4
5
.sidebar {
  position: sticky;
  top: 78px;                            /* 距离顶部 78px 时粘住 */
  height: calc(100vh - 78px);           /* 高度 = 屏幕高度 - 78px */
}

通俗理解：sticky 是 relative 和 fixed 的结合体——平时正常滚动（relative），当滚动到离顶部只剩 78px 时，就粘住不动了（fixed）。这比用 JS 监听滚动事件简单得多。

交互提示 — cursor / user-select

1
2
3
4
.category-group-header {
  cursor: pointer;       /* 鼠标移上去变成小手，暗示可点击 */
  user-select: none;     /* 文字不能被选中（防止双击选中文字） */
}
cursor 值 效果
pointer 小手（可点击）
default 默认箭头
text 文本输入光标 I 形
not-allowed 禁止符号

通俗理解：cursor: pointer 告诉用户”这里可以点”，user-select: none 防止用户误操作选中了标题文字（体验更好）。