CSS基础语法
1.grid-template-areas
作用：在划分完网页区域之后，网页页面的布局就是一个网格的形式，而"grid-template-areas"则是用于将需要的网格进行融合，通俗易懂的讲就是告诉浏览器，网格中的哪些部分属于一个整体区域
语法简介：
- 用“ ”括起来的内容表示一行
- 用分隔号分开的每一个区域名字都表示一列；
- 相同区域名的网格会合成到一起
初始状态：最基础的网格（2 行 3 列）
先定义一个 2 行 3 列的网格，用 x、y、z 作为区域名（随便起的简单名字），初始代码和文本图如下：
css
.container {display: grid;grid-template-columns: 100px 100px 100px; /* 3列，每列100px */grid-template-rows: 80px 80px; /* 2行，每行80px *//* 初始区域定义：2行，每行3个区域名（空格分隔） */grid-template-areas:"x y z" /* 第1行：3列分别是x、y、z */"x y z"; /* 第2行：3列分别是x、y、z */
}
对应的文本图（像表格一样，每个格子对应区域名）：
+------+------+------+
| x | y | z | 第1行
+------+------+------+
| x | y | z | 第2行
+------+------+------+
语法 1：每个字符串 = 一行，空格分隔 = 列
- 上面代码中，
"x y z"和"x y z"是两个字符串，对应网格的「第 1 行」和「第 2 行」； - 字符串里的
x y z用空格隔开，对应每行的「第 1 列」「第 2 列」「第 3 列」。
规则：所有字符串的「单词数量必须相同」（保证列数一致），比如上面每行都是 3 个词（3 列），如果改一行少一个词就会报错：
/* 错误示例：第1行3列，第2行2列，列数不匹配 */
grid-template-areas:"x y z""x y"; /* 语法错误！浏览器会忽略整个属性 */
语法 2：相同名称 = 合并成一个大区域
如果多个格子用「相同的名称」，它们会自动合并成一个连续的矩形区域。比如把初始网格的 x 换成 a，y 换成 a，看看变化：
grid-template-areas:"a a z" /* 第1行：前两列都是a，第三列z */"a a z"; /* 第2行：前两列都是a，第三列z */
更新后的文本图（a 合并成了一个 “2 行 2 列” 的大区域）：
+------+------+------+
| | |
| a | z | 第1行：a占前2列
| | |
+------+------+------+
| | |
| a | z | 第2行：a占前2列
| | |
+------+------+------+
关键：合并的区域必须是「矩形」（不能是凹形或 L 形）。比如下面的 a 是错的（不是矩形）：
/* 错误示例：a的形状是L形，不合法 */
grid-template-areas:"a a z""a z z"; /* 浏览器会忽略这个定义 */
语法 3：. 代表空区域（该位置不放元素）
用 . 表示 “这个格子是空的，不分配元素”。比如在上面的基础上，把 z 换成 .（空）：
grid-template-areas:"a a ." /* 第1行：前两列a，第三列空 */"a a ."; /* 第2行：前两列a，第三列空 */
文本图（第三列变成空格子）：
+------+------+------+
| | |
| a | . | 第1行：第三列空
| | |
+------+------+------+
| | |
| a | . | 第2行：第三列空
| | |
+------+------+------+
小技巧：多个连续的空格子可以简写（比如 .. 代表两列空），但推荐用空格分开（. .）更易读。
语法 4：元素通过 grid-area 对应区域
定义好区域后，给元素设置 grid-area: 区域名，元素就会自动进入对应区域。比如在上面的网格中，加一个元素 .box 对应 a：
.box { grid-area: a; } /* 元素放到a区域 */
最终布局文本图（.box 填满 a 的大区域）：
+------+------+------+
| |
| .box | 第1行：.box占前2列
| |
+------+------+------+
| |
| .box | 第2行：.box占前2列
| |
+------+------+------+
总结：核心逻辑
grid-template-areas 就像用 “文字画表格”：
- 每行一个字符串 → 对应网格的一行；
- 空格分隔的单词 → 对应每行的一列；
- 相同单词 → 合并成矩形区域；
.→ 空格子；
2.grid切分区域逻辑
切分逻辑：
- 列（grid-template-columns） 负责横向切分宽度，顺序是 从左到右 划分；
- 行（grid-template-rows） 负责纵向切分高度，顺序是 从上到下 划分。
示例代码：
:root{--ridebar-width:24rem;--top-bar-height:6rem;
}
*{margin: 0;padding: 0;box-sizing: border-box;font-size: 62.5%;
}
body{height: 100dvh;display: grid;grid-template-columns:var(--ridebar-width) 1fr ;grid-template-rows: var(--top-bar-height) 1fr;grid-template-areas: "sidebar top-bar""sidebar content-area"
}第一步：明确初始状态（未布局时的页面）
在没加任何网格布局时，页面是一个「完整的视口高度区域」（因为 body { height: 100dvh; }，100dvh 表示占满屏幕可视高度）。
初始文本图（整个页面是一个大盒子）：
plaintext
+----------------------------------------+
| |
| 整个页面（100dvh高） |
| |
+----------------------------------------+
第二步：横向切分（列）—— grid-template-columns
代码中用 grid-template-columns: var(--ridebar-width) 1fr 定义了列的划分，先看变量：:root { --ridebar-width: 24rem; } → 侧边栏宽度固定为 24rem（rem 是相对单位，1rem 通常 = 16px，这里约 384px）。
列的切分逻辑：
- 第 1 列：宽度 =
--ridebar-width（24rem），专门给侧边栏用； - 第 2 列：宽度 =
1fr（fraction，比例单位），表示 “占剩余所有空间”，给主内容相关区域用。
此时页面被横向切成了「左右两列」，文本图如下：
plaintext
+------------------+-----------------------+
| | |
| 第1列（24rem） | 第2列（1fr） |
| （侧边栏预留） | （顶部栏+内容区预留） |
| | |
+------------------+-----------------------+
关键：
1fr 会自动 “吃掉” 剩余空间。比如屏幕宽度是 100rem，第 1 列占 24rem，第 2 列就占 76rem（100-24）；如果屏幕变宽，第 2 列会自动变宽，第 1 列始终 24rem。
第三步：纵向切分（行）—— grid-template-rows
代码中用 grid-template-rows: var(--top-bar-height) 1fr 定义了行的划分，变量：:root { --top-bar-height: 6rem; } → 顶部栏高度固定为 6rem（约 96px）。
行的切分逻辑：
- 第 1 行：高度 =
--top-bar-height（6rem），专门给顶部栏用； - 第 2 行：高度 =
1fr，表示 “占剩余所有空间”，给主内容区用。
此时页面在横向两列的基础上，又被纵向切成了「上下两行」，形成一个「2 行 2 列」的网格（共 4 个单元格）。文本图如下：
plaintext
+------------------+-----------------------+
| | |
| 第1行第1列 | 第1行第2列 |
| （高6rem） | （高6rem） |
| | |
+------------------+-----------------------+
| | |
| 第2行第1列 | 第2行第2列 |
| （高1fr） | （高1fr） |
| | |
+------------------+-----------------------+
关键：
整个页面高度是 100dvh（比如屏幕高 80rem），第 1 行占 6rem，第 2 行就占 74rem（80-6）；屏幕高度变化时，第 2 行会自动适配剩余空间。
第四步：给网格区域命名 —— grid-template-areas
有了 2 行 2 列的网格后，用 grid-template-areas 给每个单元格（或合并单元格）起名字，对应页面的具体区域：
css
grid-template-areas: "sidebar top-bar" /* 第1行：第1列叫sidebar，第2列叫top-bar */"sidebar content-area"; /* 第2行：第1列叫sidebar，第2列叫content-area */
区域合并逻辑：
- 第 1 行第 1 列和第 2 行第 1 列都叫
sidebar→ 这两个单元格合并成一个大区域（占 2 行 1 列），就是侧边栏； - 第 1 行第 2 列叫
top-bar→ 单独作为顶部栏区域（占 1 行 1 列）； - 第 2 行第 2 列叫
content-area→ 单独作为主内容区（占 1 行 1 列）。
最终布局文本图（标注区域名）：
plaintext
+------------------+-----------------------+
| | |
| | top-bar |
| sidebar | （顶部导航/工具栏） |
| | |
+------------------+-----------------------+
| | |
| | |
| sidebar | content-area |
| （侧边导航） | （主要内容展示区） |
| | |
| | |
+------------------+-----------------------+
总结：各部分的作用
:root变量 → 统一管理侧边栏宽度和顶部栏高度，改一处全页面生效；grid-template-columns→ 横向切分左右两列（固定宽 + 自适应宽）；grid-template-rows→ 纵向切分上下两行（固定高 + 自适应高）；grid-template-areas→ 给网格单元格命名并合并，形成三个功能区域：sidebar（侧边栏）：左列全高（2 行 1 列）；top-bar（顶部栏）：右列第一行（1 行 1 列）；content-area（内容区）：右列第二行（1 行 1 列）。
后续在学习的过程中会慢慢补充......