Frontend►CSS

013-Grid布局

CSS Grid 布局详解

CSS Grid 布局是当前最强大的二维布局系统，可以同时处理行和列的布局。它彻底改变了我们创建网页布局的方式。

一、基本概念

1.1 网格容器 (Grid Container)

通过设置 display: grid 或 display: inline-grid 来定义一个网格容器。

1
2
3
.container {
  display: grid;
}

1.2 网格项 (Grid Items)

网格容器的直接子元素自动成为网格项。

1.3 网格线 (Grid Lines)

构成网格结构的分隔线，有行网格线和列网格线。

1.4 网格轨道 (Grid Track)

相邻两条网格线之间的空间，即行或列。

1.5 网格单元格 (Grid Cell)

四条网格线包围的最小单位区域。

1.6 网格区域 (Grid Area)

由一个或多个网格单元格组成的矩形区域。

二、容器属性

2.1 定义网格

1
2
3
4
.container {
  grid-template-columns: 100px 200px auto;
  grid-template-rows: 50px 100px;
}

2.2 重复轨道

1
2
3
.container {
  grid-template-columns: repeat(3, 1fr);
}

2.3 自动填充

1
2
3
.container {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

2.4 网格间距

1
2
3
4
5
.container {
  grid-gap: 10px; /* 简写 */
  row-gap: 10px;
  column-gap: 20px;
}

2.5 对齐方式

1
2
3
4
5
6
7
8
.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
  place-items: <align-items> <justify-items>;
  
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

三、项目属性

3.1 项目定位

1
2
3
4
5
6
7
8
9
10
11
12
13
.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  
  /* 简写 */
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  
  /* span关键字 */
  grid-column: 1 / span 2;
}

3.2 命名区域

1
2
3
4
5
6
7
8
9
10
11
.container {
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

3.3 项目对齐

1
2
3
4
5
.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
  place-self: <align-self> <justify-self>;
}

四、实用布局示例

4.1 经典12列布局

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.col-4 {
  grid-column: span 4;
}

.col-6 {
  grid-column: span 6;
}

4.2 响应式网格

1
2
3
4
5
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

4.3 圣杯布局

1
2
3
4
5
6
7
8
.container {
  display: grid;
  grid-template:
    "header header header" 80px
    "nav content aside" 1fr
    "footer footer footer" 60px
    / 200px 1fr 200px;
}

五、Grid vs Flexbox

特性 Grid Flexbox
维度 二维布局 一维布局
应用方向 同时控制行和列 单一方向（行或列）
内容影响 容器定义结构 内容影响布局
适合场景 整体页面布局 组件内布局

六、浏览器支持

  • 所有现代浏览器全面支持
  • IE10/11支持旧版语法（需加-ms前缀）

七、最佳实践

  1. 使用fr单位创建弹性轨道
  2. 结合minmax()实现响应式
  3. 命名网格线提高可读性
  4. 使用grid-template-areas可视化布局
  5. 渐进增强：为不支持Grid的浏览器提供fallback

Grid布局提供了前所未有的布局控制能力，是构建复杂响应式布局的理想选择。

Frontend►CSS

014-`CSS` 链接伪类（LVHA）

CSS 链接伪类详解：:link, :visited, :hover, :active

这四个伪类是专门用于定义超链接（<a> 标签）不同状态的样式，被称为 LVHA 顺序（或 LoVe-HAte 记忆法）。

1. 各伪类含义

伪类 描述 典型用途
:link 选择未被访问过的链接 设置默认链接样式
:visited 选择已被访问过的链接（基于浏览器历史记录） 区分已读/未读链接
:hover 选择鼠标悬停时的链接 添加悬停反馈效果
:active 选择被激活时的链接（鼠标按下但未释放时） 显示点击瞬间的反馈

2. 正确顺序的重要性

必须按照 LVHA 顺序 定义样式（:link → :visited → :hover → :active），否则某些样式可能不会生效。这是因为CSS的层叠规则。

记忆口诀：LoVe-HAte (L-V-H-A)

1
2
3
4
5
/* 正确顺序示例 */
a:link { color: blue; }      /* 未访问链接 - 蓝色 */
a:visited { color: purple; } /* 已访问链接 - 紫色 */
a:hover { color: red; }      /* 鼠标悬停 - 红色 */
a:active { color: orange; }  /* 点击瞬间 - 橙色 */

3. 浏览器安全限制

出于隐私考虑，现代浏览器对 :visited 伪类有严格限制：

  • 只能修改 color, background-color, border-color 等颜色相关属性
  • 不能获取 :visited 样式通过 JavaScript（防止检测用户浏览历史）

4. 实际应用示例

基础链接样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
a:link {
  color: #0066cc;
  text-decoration: none;
}

a:visited {
  color: #6699cc;
}

a:hover {
  text-decoration: underline;
  color: #ff6600;
}

a:active {
  color: #ff0000;
}

按钮式链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
a:link, a:visited {
  display: inline-block;
  padding: 10px 20px;
  background: #4CAF50;
  color: white;
  border-radius: 4px;
  transition: background 0.3s;
}

a:hover {
  background: #45a049;
}

a:active {
  background: #3e8e41;
  transform: translateY(1px);
}

5. 注意事项

  1. 非 <a> 标签：这些伪类也可用于其他有 href 属性的元素（如 <area>）
  2. 移动设备：:hover 在触摸屏上表现不同（通常需要实际点击才会触发）
  3. 优先级：如果顺序错误，后定义的规则可能覆盖前面的规则
  4. 简写写法：单独写 a {...} 会同时影响所有状态，通常不建议

6. 扩展伪类

现代CSS还新增了：

  • :focus - 键盘聚焦时的样式（应放在 :hover 之后）
  • :focus-visible - 仅当键盘聚焦时生效（避免鼠标点击时的焦点样式）

完整推荐顺序：

1
a:link → a:visited → a:hover → a:focus → a:active