羽毛的小屋

CSS选择器

羽毛 — Tue, 08 Sep 2026 00:00:00 GMT

一、基础选择器

1.1 通配选择器 *

匹配规则：匹配页面中所有元素。

<div>div 元素</div>
<p>p 元素</p>
<span>span 元素</span>

* {
  color: red;
}

结果：div、p、span 全部变红。

1.2 标签选择器 div

匹配规则：匹配指定标签名的所有元素。

<div>div 元素</div>
<p>p 元素</p>
<div>另一个 div 元素</div>

div {
  color: red;
}

结果：两个 div 变红，p 不变。

1.3 类选择器 .class

匹配规则：匹配具有指定 class 属性的所有元素，可复用。

<div class="box">div 盒子</div>
<p class="box">p 盒子</p>
<span>span 元素</span>

.box {
  color: red;
}

结果：div 和 p 都变红，span 不变。

1.4 ID 选择器 #id

匹配规则：匹配具有指定 id 属性的元素，页面内唯一。

<div id="header">页头</div>
<div id="footer">页脚</div>

#header {
  color: red;
}

结果：只有”页头”变红，“页脚”不变。

1.5 存在性属性选择器 [attr]

匹配规则：匹配带有指定属性名的元素，不管属性值是什么。

<input type="text" placeholder="用户名">
<input placeholder="密码">
<button>登录</button>

[placeholder] {
  background: yellow;
}

结果：用户名框和密码框背景变黄，button 不变（没有 placeholder 属性）。

1.6 完全匹配 [attr=“val”]

匹配规则：属性值完全等于指定值。

<input type="text">
<input type="password">
<input type="text">

[type="text"] {
  border: 2px solid red;
}

结果：两个 type=“text” 的输入框加红边框，密码框不变。

1.7 开头匹配 [attr^=“val”]

匹配规则：属性值以指定值开头。

<a href="https://example.com">安全链接</a>
<a href="http://example.com">不安全链接</a>

[href^="https"] {
  color: green;
}

结果：第一个链接变绿（以 https 开头），第二个不变（http 开头）。

1.8 结尾匹配 [attr$=“val”]

匹配规则：属性值以指定值结尾。

<img src="photo.jpg">
<img src="icon.png">
<img src="photo.gif">

[src$=".png"] {
  border: 3px solid blue;
}

结果：只有 icon.png 加蓝边框，其他不变。

1.9 包含匹配 [attr*=“val”]

匹配规则：属性值包含指定子串。

<div class="btn-primary">主要按钮</div>
<div class="btn-danger">危险按钮</div>
<div class="header">页头</div>

[class*="btn"] {
  color: white;
  background: black;
}

结果：前两个 div 变白字黑底（class 里包含”btn”），第三个不变。

二、组合选择器（层级与兄弟关系）

2.1 后代选择器（空格）A B

匹配规则：选中 A 内部所有层级的 B 元素，儿孙全算，不限层级。

<div class="box">
  <p>儿子 p</p>
  <div>
    <p>孙子 p</p>
  </div>
</div>

.box p {
  color: red;
}

结果：儿子 p 和孙子 p 全都变红。

2.2 子代选择器（大于号）A > B

匹配规则：只选 A 的直接子元素 B，隔一层就不算。

<div class="box">
  <p>儿子 p</p>
  <div>
    <p>孙子 p</p>
  </div>
</div>

.box > p {
  color: red;
}

结果：只有”儿子 p”变红。“孙子 p”被 <div> 包着，隔了一层，选不中。

2.3 相邻兄弟选择器（加号）A + B

匹配规则：选中紧跟在 A 后面的第一个同级兄弟 B，必须紧挨着，中间不能有任何标签。

<h2>标题</h2>
<p>紧挨着的 p</p>
<p>隔了一个的 p</p>

h2 + p {
  color: red;
}

结果：第一个 <p> 变红，第二个不变（不紧挨 h2）。

2.4 通用兄弟选择器（波浪号）A ~ B

匹配规则：选中 A 后面所有的同级兄弟 B，不要求紧挨，隔了其他标签也能继续抓。

<h2>标题</h2>
<p>第一个 p</p>
<div>中间隔了 div</div>
<p>第二个 p</p>

h2 ~ p {
  color: red;
}

结果：第一个 p 和第二个 p 全都变红，中间隔了 div 也不影响。

2.5 并集选择器（分组选择器）h1, .title, #main

匹配规则：用逗号 , 把多个选择器打成一组，同时选中其中任意一个命中的元素（相当于”或”的关系），常用于把多个元素的相同样式合并成一条规则。

<h1>一级标题</h1>
<p class="title">类名为 title 的段落</p>
<div id="main">id 为 main 的区块</div>
<span>普通 span</span>

h1, .title, #main {
  color: red;
}

结果：h1、.title、#main 三个元素全部变红，span 不变。

注意：逗号列表属于”非宽容”选择器——只要列表里任何一个选择器写错或浏览器不认识，整条规则都会失效。如果想让某一项失效不影响整体，可以用 :is() 包裹，但 :is() 的权重取括号内选择器的最高权重，与逗号列表里各项独立计算权重的方式不同。

三、伪类选择器（单冒号 :）

3.1 动态伪类

:hover

匹配规则：鼠标悬停时触发。

<button>悬停我</button>

button:hover {
  background: red;
  color: white;
}

结果：鼠标放上去，按钮背景变红，字变白。

:focus

匹配规则：表单元素获得焦点时触发（点击输入框或 Tab 键切换）。

<input type="text" placeholder="点击我">
<input type="text" placeholder="点我试试">

input:focus {
  border: 3px solid blue;
  outline: none;
}

结果：点击哪个输入框，哪个就加蓝边框。

:link

匹配规则：匹配尚未被访问过的链接（带 href 属性的 <a>）。页面刚打开时，所有链接默认都处于 :link 状态。

<a href="https://example.com">未被访问的链接</a>
<a href="https://example.org">另一个链接</a>

a:link {
  color: blue;
  text-decoration: none;
}

结果：两个链接都显示为蓝色、无下划线（未访问状态）。

:visited

匹配规则：匹配已经被用户访问过（点击打开过）的链接。出于隐私保护，浏览器只允许 :visited 修改颜色类属性，其他样式一律无效。

<a href="https://example.com">访问过的链接</a>

a:visited {
  color: purple;
}

结果：访问过的链接变紫，未访问的链接保持 :link 的蓝色。

:active

匹配规则：匹配鼠标按下但还没松开的瞬间被激活的元素，常用于点击按钮时给出”按下”的反馈。

<button>点我</button>

button:active {
  transform: scale(0.95);
  background: #e0e0e0;
}

结果：按钮按下的瞬间缩小并变灰，松手后恢复。

注意：链接相关的伪类书写顺序必须为 :link → :visited → :hover → :active（记忆口诀：Love Hate），顺序错误会导致样式失效。

3.2 结构伪类

:first-child / :last-child

匹配规则：first-child 选父元素中的第一个子元素，last-child 选最后一个。

<ul>
  <li>第 1 项</li>
  <li>第 2 项</li>
  <li>第 3 项</li>
</ul>

li:first-child {
  color: red;
}
li:last-child {
  color: blue;
}

结果：第 1 项变红，第 3 项变蓝，第 2 项不变。

:nth-child(n)

匹配规则：选父元素中的第 n 个子元素。n 从 1 开始，也支持 odd（奇数）、even（偶数）、2n+1 等公式。

<ul>
  <li>第 1 项</li>
  <li>第 2 项</li>
  <li>第 3 项</li>
  <li>第 4 项</li>
</ul>

li:nth-child(2) {
  background: yellow;
}
li:nth-child(odd) {
  color: red;
}
li:nth-child(even) {
  color: blue;
}

结果：

· 第 2 项黄色背景 · 第 1、3 项红色字（奇数） · 第 2、4 项蓝色字（偶数）

:nth-of-type(n)

匹配规则：在同类型标签中选第 n 个，忽略其他类型的标签干扰。

<div>
  <p>第 1 个 p</p>
  <span>span</span>
  <p>第 2 个 p</p>
  <p>第 3 个 p</p>
</div>

p:nth-of-type(2) {
  color: red;
}

结果：只有”第 2 个 p”变红。如果是用 :nth-child(2)，选中的反而是 span。

:nth-last-child(n)

匹配规则：从父元素的最后一个子元素往前数，选第 n 个，同样支持 odd、even、2n+1 等公式。

<ul>
  <li>第 1 项</li>
  <li>第 2 项</li>
  <li>第 3 项</li>
  <li>第 4 项</li>
</ul>

li:nth-last-child(1) {
  color: red;
}

结果：倒数第 1 个（第 4 项）变红。

:first-of-type

匹配规则：选父元素中同类型的第一个子元素。与 :first-child 的区别：:first-child 要求必须是”第一个孩子且类型匹配”，:first-of-type 只要求是”同类型中第一个出现的”，前面有其他标签挡着也没关系。

<div>
  <span>span</span>
  <p>第 1 个 p</p>
  <p>第 2 个 p</p>
</div>

p:first-of-type {
  color: red;
}

结果：“第 1 个 p”变红（它是 p 元素中第一个出现的）；如果改用 p:first-child 则选不中（它前面还有 span）。

:last-of-type

匹配规则：选父元素中同类型的最后一个子元素，规则和 :first-of-type 正好相反。

<div>
  <p>第 1 个 p</p>
  <span>span</span>
  <p>第 2 个 p</p>
</div>

p:last-of-type {
  color: red;
}

结果：“第 2 个 p”变红，span 不影响计数。

:only-child

匹配规则：选父元素中唯一的那个子元素。

<div>
  <p>唯一的 p</p>
</div>
<div>
  <p>第 1 个 p</p>
  <p>第 2 个 p</p>
</div>

p:only-child {
  color: red;
}

结果：第一个 div 里的 p 变红（它是唯一子元素）；第二个 div 有两个 p，都不算唯一子元素，不变。

:only-of-type

匹配规则：选父元素中同类型里唯一的元素，允许旁边有其他不同类型的兄弟元素。

<div>
  <p>唯一的 p</p>
  <span>span</span>
</div>
<div>
  <p>第 1 个 p</p>
  <p>第 2 个 p</p>
</div>

p:only-of-type {
  color: red;
}

结果：第一个 div 里的 p 变红（虽然旁边有 span，但 p 类型只有它一个）；第二个 div 有两个 p，不变。

:root

匹配规则：匹配文档根元素，即 <html>。最常用于在根元素上声明全局 CSS 自定义变量（变量对整棵文档树的所有后代生效）。

<div>普通文字</div>

/* 在根元素声明全局变量 */
:root {
  --main-color: #e74c3c;
}

div {
  color: var(--main-color); /* 任何后代元素都可以使用 */
}

结果：div 的文字颜色使用 :root 声明的变量 —main-color（红色）。

:empty

匹配规则：匹配没有任何子节点的元素——不能有标签、不能有文本，连空格都不能有，常用于空状态占位。

<div class="empty"></div>
<div>有文本</div>
<div class="empty"> </div>

.empty:empty {
  background: #eee;
  height: 50px;
}

结果：第一个空 div 显示灰底占位；第二个有文本、第三个里面有空格都不算空，样式不生效。

:target

匹配规则：匹配当前 URL 锚点（#id）指向的元素，可用于纯 CSS 实现手风琴、选项卡切换等交互。

<a href="#section-1">打开区块一</a>
<div id="section-1">区块一的内容</div>
<div id="section-2">区块二的内容</div>

:target {
  background: yellow;
}

结果：当 URL 变成 页面地址#section-1 时，对应的区块一出现黄底；点击其他锚点链接则跟着切换。

说明：div:first-child（必须是第一个孩子且为 div）与 div:first-of-type（第一个出现的 div）含义不同，使用时需注意区分。

3.3 表单状态伪类

表单相关的状态伪类数量多、逻辑独立，在日常开发中使用频率很高，因此单独拆成独立章节。

:enabled / :disabled

匹配规则：:enabled 匹配可编辑、可用的表单控件；:disabled 匹配被禁用的表单控件（设置了 disabled 属性）。

<input type="text" placeholder="可用">
<input type="text" placeholder="禁用" disabled>

input:enabled {
  background: white;
}

input:disabled {
  background: #eee;
  color: #999;
}

结果：第一个输入框保持白底；第二个变灰底灰字（禁用状态，无法编辑）。

:read-only / :read-write

匹配规则：:read-only 匹配只读的表单控件（设置了 readonly 属性）；:read-write 匹配可读写的表单控件（默认状态）。

<input type="text" value="只读框" readonly>
<input type="text" placeholder="可编辑框">

input:read-only {
  background: #f5f5f5;
  border: 1px dashed #999;
}

input:read-write {
  background: white;
}

结果：只读框灰底虚线边框，可编辑框保持白底。

:required / :optional

匹配规则：:required 匹配设置了 required 属性的必填控件；:optional 匹配没设 required 的非必填控件。

<form>
  <input type="text" required placeholder="必填项">
  <input type="text" placeholder="选填项">
</form>

input:required {
  border: 2px solid #e74c3c;
}

input:optional {
  border: 2px solid #ccc;
}

结果：必填框红边框，选填框灰边框。

:valid / :invalid

匹配规则：:valid 匹配内容通过浏览器内置校验规则的表单控件；:invalid 匹配校验失败的控件（比如 type=“email” 的内容不是邮箱格式）。

<form>
  <input type="email" placeholder="邮箱" value="hello">
  <input type="email" placeholder="邮箱" value="a@b.com">
</form>

input:valid {
  border: 2px solid #2ecc71;
}

input:invalid {
  border: 2px solid #e74c3c;
}

结果：第一个邮箱格式错误变红框，第二个格式正确变绿框。

:in-range / :out-of-range

匹配规则：:in-range 匹配数值在 min / max 范围内的输入框；:out-of-range 匹配超出范围的值。

<input type="number" min="0" max="10" value="5">
<input type="number" min="0" max="10" value="20">

input:in-range {
  border: 2px solid #2ecc71;
}

input:out-of-range {
  border: 2px solid #e74c3c;
}

结果：5 在 0~10 范围内变绿框；20 超出范围变红框。

:placeholder-shown

匹配规则：匹配当前正在显示占位文本（placeholder）的输入框，常用于判断用户是否还没输入内容。

<input type="text" placeholder="请输入用户名">

input:placeholder-shown {
  border: 2px dashed #999;
}

结果：输入框显示占位文字时是灰色虚线边框；一旦用户输入内容，占位文字消失，样式自动取消。

:checked

匹配规则：单选框或复选框被选中时触发。

<input type="checkbox"> 接受条款
<input type="checkbox" checked> 已勾选

input:checked {
  outline: 2px solid red;
}

结果：默认勾选的那个出现红描边，另一个不变。

:default

匹配规则：匹配表单中默认被选中的元素（例如带 checked 属性的单选框/复选框，或带 selected 属性的 option），页面刷新或重置后仍指向它。

<form>
  <input type="radio" name="opt" checked> 选项一
  <input type="radio" name="opt"> 选项二
</form>

input:default {
  outline: 2px solid blue;
}

结果：选项一（默认选中项）加蓝描边；用户手动切换选中其他选项后，:default 仍然指向最初的默认项。

:indeterminate

匹配规则：匹配处于”不确定”状态的复选框或单选框，典型场景是”全选框”的部分选中（半选）状态。

<input type="checkbox" id="all"> 全选
<input type="checkbox" checked> 子项一
<input type="checkbox"> 子项二

#all:indeterminate {
  outline: 2px solid orange;
}

结果：当通过 JS 将全选框的 indeterminate 属性设为 true 后，它呈现半选状态（框内显示一条横线）并加橙描边；该状态需要配合 JS 触发。

3.4 逻辑与关系伪类

这类选择器不按标签、类、ID 或属性来选元素，而是按逻辑关系或特殊匹配方式来选，功能更灵活。

否定选择器 :not()

匹配规则：选中不匹配括号里选择器的元素（排除法）。

<ul>
  <li>第 1 项</li>
  <li class="active">第 2 项（激活）</li>
  <li>第 3 项</li>
</ul>
<input type="text" disabled>
<input type="text" placeholder="可用">

/* 排除 class="active" 的 li */
li:not(.active) {
  color: gray;
}

/* 排除禁用状态，且获得焦点的输入框（多选择器连用） */
input:not(:disabled):focus {
  border-color: blue;
}

结果：第 1、3 项变灰（第 2 项不变）；可用的输入框获得焦点时加蓝边框（禁用的输入框无法获得焦点，所以不变）。

任意匹配选择器 :is()

匹配规则：将多个选择器打包分组，匹配其中任意一个就能命中（相当于”或”的关系）。

<header class="header"><p>头部段落</p></header>
<footer class="footer"><p>底部段落</p></footer>
<section><p>普通段落</p></section>

/* 等价于 .header p, .footer p，且权重等于 0,0,1,1（类+标签） */
:is(.header, .footer) p {
  color: red;
}

结果：头部和底部的段落变红，普通段落不变。

:is() 在旧浏览器兼容性不如 :where()，使用时注意。

零权重分组选择器 :where()

匹配规则：和 :is() 用法完全一样，也是打包分组。唯一区别：权重恒为 0，哪怕括号里写 #id，整体权重也是 0,0,0,0。

<nav class="nav"><a href="#">首页</a></nav>
<footer class="footer"><a href="#">隐私</a></footer>
<div class="special"><a href="#">特别链接</a></div>

/* 等价于 .nav a, .footer a，但权重仅为 a（0,0,0,1） */
:where(.nav, .footer) a {
  color: blue;
}

/* 一个类选择器（权重 0,0,1,1）就能轻松覆盖上面的蓝色 */
.special a {
  color: red;
}

结果：导航和页脚的链接默认蓝色；而 .special 里的链接变红（无需 !important 就能覆盖）。

关系选择器 :has()

匹配规则：选中包含某个子元素或满足某种条件的父元素（相当于”父级选择器”）。

<div class="card">
  <h2>标题</h2>
  <p>内容段落</p>
</div>
<div class="card">
  <h2>标题</h2>
</div>

/* 选中包含 <p> 子元素的 .card */
.card:has(p) {
  border: 2px solid red;
}

结果：第一个 .card 加红边框（因为里面有 <p>），第二个不变。

兼容性注意：:has() 是较新的选择器，部分旧浏览器不支持，现代项目可用。

3.5 伪类组合连写（通用规则）

多个选择器（含伪类）可以紧挨着连写（中间无空格），表示”且”的关系（必须同时满足所有条件）。

/* 悬停且被激活的链接 */
a:hover:active {
  color: orange;
}

/* 第一个子元素且被悬停的 li */
li:first-child:hover {
  background: gray;
}

/* 结合 :not() 使用：未被禁用且获得焦点的输入框 */
input:not(:disabled):focus {
  border-color: blue;
}

两个致命细节：

顺序影响效果（LVHA 规则）：针对 <a> 标签，伪类必须按 :link → :visited → :hover → :active 顺序写（记忆口诀：Love Hate），否则在部分浏览器中可能失效。
伪元素必须放最后：如果混用伪类与伪元素（如 ::before），伪元素必须写在所有伪类后面。正确：div:hover::before { } 错误：div::before:hover { }（浏览器无法解析，直接忽略）

权重累加：链式组合的伪类越多，权重越高（如 div:hover:not(.active) 权重为 0,0,2,1）。

四、伪元素（双冒号 ::）

4.1 ::before / ::after

匹配规则：在元素内部最前面（before）或最后面（after）创建一个虚拟子元素，必须写 content 属性才能显示。

<div class="box">内容</div>

.box::before {
  content: "【前缀】";
  color: red;
}
.box::after {
  content: "【后缀】";
  color: blue;
}

结果：页面上显示为【前缀】内容【后缀】，前缀红字，后缀蓝字。

4.2 ::first-line

匹配规则：选中块级元素中的第一行文本（根据浏览器中显示的换行的情况，不是根据代码里面的回车之类的换行）。

<p>这是第一行，这是第一行，这是第一行，这是第一行，这是第一行，这是第一行，这是第一行。</p>

p::first-line {
  font-weight: bold;
  color: red;
}

结果：第一行变粗变红，后面行不变。

4.3 ::first-letter

匹配规则：选中块级元素的首字母（中文即第一个字），常用于制作首字下沉效果。

<p>山重水复疑无路，柳暗花明又一村。</p>

p::first-letter {
  font-size: 2em;
  font-weight: bold;
  color: red;
}

结果：首字”山”放大加粗变红，形成首字下沉的视觉效果。

4.4 ::selection

匹配规则：匹配用户用鼠标高亮选中的文本区域，可自定义选中文字的颜色和背景。

<p>选中我试试看。</p>

::selection {
  background: #ffd700;
  color: #000;
}

结果：页面任意文字被选中时，背景金黄、文字变黑（覆盖浏览器默认的蓝底白字）。

4.5 ::placeholder

匹配规则：匹配输入框的占位提示文本，用来单独给占位文字设置样式，只能修改颜色等少数文字属性。

<input type="text" placeholder="请输入用户名">

input::placeholder {
  color: #999;
  font-style: italic;
}

结果：占位文字显示为灰字斜体；用户输入内容后占位文本消失，样式不再生效。

4.6 ::marker

匹配规则：匹配列表项前面的项目标记符号（圆点、序号等），可修改标记的颜色、字号等。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>

li::marker {
  color: red;
  font-weight: bold;
}

结果：列表前的圆点标记变红加粗，列表文字本身不变。

4.7 ::backdrop

匹配规则：匹配全屏模式（Fullscreen API）或 <dialog> 弹窗背后的背景层，常用来给弹窗加一层半透明蒙层。

<dialog open>
  <p>弹窗内容</p>
</dialog>

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

结果：弹窗后面的区域出现半透明黑色蒙层，突出弹窗内容。

五、优先级权重（防冲突）

当多个选择器同时指向同一个元素时，哪个规则生效？按权重从高到低排列：

类型	权重值	示例
行内样式	1,0,0,0	`<div style="color:red;">`
ID 选择器	0,1,0,0	`#header`
类 / 伪类 / 属性选择器	0,0,1,0	`.box`、`:hover`、`[type="text"]`
标签 / 伪元素	0,0,0,1	`div`、`::before`
通配符 / 组合符	0,0,0,0	`*`、`>`、`+`、`~`

<div id="box" class="box" style="color: yellow;">什么颜色？</div>

#box { color: red; }      /* ID 权重 0100 */
.box { color: blue; }     /* 类 权重 0010 */
div { color: green; }     /* 标签 权重 0001 */

结果：文字是黄色。行内样式权重最高（1000），压过了所有外部样式。

选择器权重计算规则如下：

:not() 本身的权重不计，总权重由括号内选择器的最高权重决定。例如 :not(.box) 权重等于 .box（0,0,1,0），而 :not(#id) 权重等于 #id（0,1,0,0）。
:is() 取括号内选择器的最高权重（如 :is(.header, .footer) 权重等于类选择器 0,0,1,0）。
:where() 权重恒为 0，哪怕括号里写 #id，整体权重也是 0,0,0,0。专门用于”低优先级兜底样式”。
:has() 的权重计算方式与 :is() 相同，取括号内选择器的最高权重；但它在匹配时需要遍历相关节点，性能开销比普通选择器大，建议谨慎使用。
!important 拥有最高特权（具体用法看下面），日常开发尽量避免：它会破坏 CSS 层叠规则，导致后期修改只能不断追加 !important，维护成本极高。仅限极少数场景（如覆盖第三方库且无其他办法）才谨慎使用。

注意：!important 不属于选择器，它是写在属性值后面的修饰符。

div {
  color: green !important; /* 无论外部样式权重多少，这条强制生效，除非另一个与其冲突的也使用了!important且权重更高 */
}

Shell 速查表

羽毛 — Mon, 07 Sep 2026 00:00:00 GMT

一、脚本基础结构

1.1 指定解释器 Shebang（#!/bin/bash）

语法作用：脚本文件的第一行，告诉系统用哪个解释器执行这个脚本。必须顶格写，前面不能有空格或空行。

#!/bin/bash
# 这是注释
echo "Hello World"

结果：系统调用 /bin/bash 来执行脚本内容。

1.2 给脚本添加执行权限 chmod +x

语法作用：脚本文件必须拥有执行权限才能直接运行（用 ./script.sh 的方式）。

chmod +x script.sh   # 给脚本添加执行权限
./script.sh          # 直接运行
bash script.sh       # 或者用 bash 命令运行（不需要执行权限）

结果：脚本开始执行。

二、变量

2.1 定义和使用变量

语法作用：变量名=值，等号两边不能有空格。引用变量时加 $。变量名区分大小写，通常用大写表示常量。

#!/bin/bash
name="张三"
age=25
echo "我的名字是 $name"
echo "我今年 ${age} 岁"    # 花括号可以隔开边界，推荐使用

结果：输出”我的名字是张三”、“我今年 25 岁”。

2.2 只读变量 readonly

语法作用：将变量设为只读，后续不能修改它的值。

#!/bin/bash
readonly PI=3.14159
PI=3.14   # 这一行会报错

结果：报错 ./test.sh: line 3: PI: readonly variable。

2.3 删除变量 unset

语法作用：删除已定义的变量（不能删除只读变量）。

#!/bin/bash
name="张三"
unset name
echo "名字是 $name"   # 输出空行，因为变量已删除

结果：$name 变成空字符串。

2.4 命令替换 $()（将命令结果赋给变量）

语法作用：执行括号内的命令，把输出结果赋值给变量。

#!/bin/bash
current_date=$(date)      # date 命令的输出赋给变量
echo "现在是 $current_date"

# 旧写法（反引号，不推荐）：current_date=`date`

结果：输出当前日期时间。

三、特殊变量（脚本参数）

3.1 接收命令行参数 $0、$1、$#…

语法作用：脚本运行时传入的参数会按顺序存入特殊变量中。

变量	含义
`$0`	脚本自身的文件名
`$1`、`$2`、`$3`…	第 1、2、3 个传入的参数
`$#`	传入参数的总个数
`$@`	所有参数（用空格隔开）
`$*`	所有参数（合并成一个字符串）
`$?`	上一条命令的执行状态（0=成功，非0=失败）
`$$`	当前 Shell 的进程 ID

#!/bin/bash
echo "脚本名: $0"
echo "第一个参数: $1"
echo "第二个参数: $2"
echo "参数个数: $#"

结果：执行 ./test.sh hello world 时输出：

脚本名: ./test.sh
第一个参数: hello
第二个参数: world
参数个数: 2

3.2 检查上一条命令是否成功 $?

语法作用：$? 返回 0 表示上一条命令执行成功，非 0 表示失败。

#!/bin/bash
ls /tmp
echo "退出码: $?"   # 输出 0（成功）

ls /不存在的目录
echo "退出码: $?"   # 输出非 0（失败）

结果：第一个 $? 输出 0，第二个输出非 0（通常是 2）。

四、条件判断（if / case）

4.1 基本 if 结构

语法作用：如果条件成立则执行 then 后的代码，否则执行 else 后的代码。[ 和 ] 两边必须有空格。

#!/bin/bash
if [ 条件 ]; then
    命令
elif [ 另一个条件 ]; then
    命令
else
    命令
fi

结果：根据条件真假执行对应分支。

4.2 文件/目录判断 -f / -d / -e

语法作用：检查文件是否存在（-f）、目录是否存在（-d）、是否存在（-e，不限类型）。

#!/bin/bash
if [ -f "/etc/passwd" ]; then
    echo "文件存在"
else
    echo "文件不存在"
fi

结果：输出”文件存在”。

if [ -d "/home" ]; then
    echo "目录存在"
fi

4.3 数值比较 -eq / -ne / -gt / -lt / -ge / -le

语法作用：比较两个整数的大小关系。

运算符	含义
`-eq`	等于（equal）
`-ne`	不等于（not equal）
`-gt`	大于（greater than）
`-lt`	小于（less than）
`-ge`	大于等于（greater or equal）
`-le`	小于等于（less or equal）

#!/bin/bash
score=85
if [ $score -ge 60 ]; then
    echo "及格"
else
    echo "不及格"
fi

结果：输出”及格”。

4.4 字符串比较 = / != / -z / -n

语法作用：比较字符串是否相同、是否为空。

#!/bin/bash
str="hello"
if [ "$str" = "hello" ]; then
    echo "匹配"
fi

if [ -z "$str" ]; then
    echo "字符串为空"
else
    echo "字符串不为空"
fi

结果：输出”匹配”、“字符串不为空”。

注意：字符串变量建议用双引号括起来，防止变量为空时语法报错。

4.5 逻辑组合（与/或/非）

语法作用：多个条件组合。-a（AND，与）、-o（OR，或）、!（NOT，非）。

#!/bin/bash
age=25
if [ $age -ge 18 ] && [ $age -le 60 ]; then
    echo "成年人"
fi

# 也可以用 -a 写法
if [ $age -ge 18 -a $age -le 60 ]; then
    echo "成年人"
fi

结果：输出”成年人”。

4.6 case 多分支匹配

语法作用：类似于其他语言的 switch，根据变量的值匹配多个模式执行不同代码。

#!/bin/bash
read -p "输入 yes 或 no: " answer
case $answer in
    yes|y|Y|Yes)
        echo "你同意了"
        ;;
    no|n|N|No)
        echo "你拒绝了"
        ;;
    *)
        echo "输入无效"
        ;;
esac

结果：输入 yes 输出”你同意了”，输入 no 输出”你拒绝了”，输入其他输出”输入无效”。

五、循环

5.1 for 循环遍历列表

语法作用：把列表里的值依次赋给变量，循环执行命令。

#!/bin/bash
for file in *.txt; do
    echo "处理文件: $file"
done

结果：把当前目录下所有 .txt 文件名依次打印出来。

#!/bin/bash
for name in 张三 李四 王五; do
    echo "你好, $name"
done

结果：分别输出三条问候。

5.2 for 循环数字区间 {起始..结束}

语法作用：用数字范围控制循环次数。

#!/bin/bash
for i in {1..5}; do
    echo "第 $i 次循环"
done

结果：打印第 1 到第 5 次循环。

# 带步长（Bash 4.0+ 支持）
for i in {1..10..2}; do
    echo $i   # 输出 1,3,5,7,9
done

5.3 C 语言风格 for 循环

语法作用：使用类似 C 语言的语法，适合精确控制循环次数。

#!/bin/bash
for ((i=0; i<5; i++)); do
    echo "计数: $i"
done

结果：输出 0 到 4。

5.4 while 条件循环

语法作用：只要条件成立就一直循环。

#!/bin/bash
count=1
while [ $count -le 5 ]; do
    echo "计数: $count"
    count=$((count + 1))
done

结果：打印计数 1 到 5。

5.5 until 直到循环（条件为假才执行）

语法作用：条件为假时执行循环，直到条件变为真才停止（与 while 相反）。

#!/bin/bash
count=1
until [ $count -gt 5 ]; do
    echo "计数: $count"
    count=$((count + 1))
done

结果：打印计数 1 到 5（直到 count > 5 才停）。

5.6 break 和 continue（跳出/跳过循环）

语法作用：break 立即退出整个循环，continue 跳过当前这一次循环，继续下一次。

#!/bin/bash
for i in {1..10}; do
    if [ $i -eq 5 ]; then
        continue   # 跳过 5
    fi
    if [ $i -gt 8 ]; then
        break      # 大于 8 就退出
    fi
    echo $i
done

结果：输出 1,2,3,4,6,7,8（跳过了 5，9 和 10 没来得及输出）。

六、数组

6.1 定义和访问数组

语法作用：用括号 () 定义数组，用索引访问元素（索引从 0 开始）。

#!/bin/bash
names=("张三" "李四" "王五")
echo "第一个: ${names[0]}"
echo "所有: ${names[@]}"

结果：输出”第一个: 张三”、“所有: 张三李四王五”。

6.2 获取数组长度

语法作用：在数组变量前加 # 获取元素个数。

#!/bin/bash
names=("张三" "李四" "王五")
echo "数组长度: ${#names[@]}"

结果：输出”数组长度: 3”。

6.3 遍历数组

语法作用：用 for 循环遍历数组的所有元素。

#!/bin/bash
names=("张三" "李四" "王五")
for name in "${names[@]}"; do
    echo "名字: $name"
done

结果：依次输出”名字: 张三”、“名字: 李四”、“名字: 王五”。

七、算术运算

7.1 整数运算 $((表达式))

语法作用：用 $((…)) 进行整数运算，支持 +、-、*、/、%（取余）、**（幂）。

#!/bin/bash
a=10
b=3
echo "加法: $((a + b))"
echo "减法: $((a - b))"
echo "乘法: $((a * b))"
echo "除法: $((a / b))"   # 整数除法，结果是 3（不是 3.33）
echo "取余: $((a % b))"   # 10 % 3 = 1
echo "幂: $((2 ** 3))"    # 2 的 3 次方 = 8

结果：输出加法 13、减法 7、乘法 30、除法 3、取余 1、幂 8。

7.2 自增/自减

语法作用：用 ((变量++)) 或 ((变量—)) 实现自增自减。

#!/bin/bash
count=0
((count++))
echo $count   # 输出 1
((count += 5))
echo $count   # 输出 6

结果：输出 1、6。

八、函数

8.1 定义和调用函数

语法作用：用 function 函数名() { … } 或函数名() { … } 定义函数，直接用函数名调用。

#!/bin/bash
# 定义函数
say_hello() {
    echo "你好！"
}

# 调用函数
say_hello

结果：输出”你好！”。

8.2 带参数的函数

语法作用：在函数内部用 $1、$2… 接收传入的参数（与脚本参数类似）。

#!/bin/bash
greet() {
    echo "你好, $1！今天是 $2"
}

greet "张三" "周一"

结果：输出”你好, 张三！今天是周一”。

8.3 函数返回值 return

语法作用：用 return 返回一个数字（0~255），作为函数的退出状态码。$? 获取返回值。

#!/bin/bash
add() {
    return $(( $1 + $2 ))
}

add 3 5
echo "结果是: $?"   # 输出 8

结果：输出”结果是: 8”。注意：return 只能返回 0~255 的数字，超过会溢出。想返回更大的数，用 echo 输出并通过 $() 捕获。

8.4 函数返回字符串（用 echo + 命令替换）

语法作用：用 echo 输出字符串，调用方用 $() 捕获输出作为返回值。

#!/bin/bash
get_name() {
    echo "张三"
}

name=$(get_name)
echo "名字是: $name"

结果：输出”名字是: 张三”。

九、输入输出

9.1 读取用户输入 read

语法作用：暂停脚本执行，等待用户输入，输入内容存入变量。

#!/bin/bash
read -p "你叫什么名字？" username
echo "你好, $username！"

结果：脚本停下等待输入，输入后输出”你好, XX！”。

# 静默输入（适合密码）
read -s -p "输入密码: " password
echo
echo "密码已保存"

9.2 输出文本 echo / printf

语法作用：echo 简单输出并自动换行，printf 更强大但不自动换行（类似 C 语言的 printf）。

#!/bin/bash
echo "普通输出"
echo -n "不换行"   # 不换行
echo "输出"

printf "格式化: %s，数字: %d\n" "张三" 25

结果：

普通输出
不换行输出
格式化: 张三，数字: 25

9.3 重定向 >（覆盖）和 >>（追加）

语法作用：> 覆盖写入文件，>> 追加到文件末尾。2> 重定向错误输出。

#!/bin/bash
echo "第一行" > log.txt   # 文件里只有这一行
echo "第二行" >> log.txt  # 文件里有两行了
ls /不存在的目录 2> error.log  # 错误信息写入文件

结果：log.txt 内容为”第一行""第二行”，error.log 包含错误信息。

十、常用脚本技巧

10.1 检查脚本是否以 root 运行

语法作用：检查 $EUID（有效用户 ID），root 的 EUID 为 0。

#!/bin/bash
if [ $EUID -ne 0 ]; then
    echo "请用 root 运行此脚本"
    exit 1
fi
echo "当前是 root"

10.2 检查上一条命令是否成功

语法作用：用 $? 判断，如果失败则退出脚本。

#!/bin/bash
mkdir /some/directory
if [ $? -ne 0 ]; then
    echo "创建目录失败，退出"
    exit 1
fi
echo "成功"

10.3 从文件中逐行读取

语法作用：用 while read 循环读取文件的每一行。

#!/bin/bash
while read line; do
    echo "行内容: $line"
done < file.txt

结果：逐行输出 file.txt 的内容。

10.4 默认值 ${变量:-默认值}

语法作用：如果变量未定义或为空，则使用默认值。

#!/bin/bash
echo "名字: ${name:-无名氏}"   # name 未定义，输出"无名氏"

结果：输出”名字: 无名氏”。

10.5 脚本所在目录（防止 cd 后路径丢失）

语法作用：获取脚本自身所在的目录，无论从哪里执行都能准确定位。

#!/bin/bash
SCRIPT_DIR=$(cd "$(dirname "$0")" && pwd)
echo "脚本在: $SCRIPT_DIR"

结果：输出脚本所在的绝对路径，不受 cd 影响。

10.6 临时文件 mktemp

语法作用：生成一个唯一的临时文件或目录，避免多个脚本实例冲突。

#!/bin/bash
temp_file=$(mktemp)
echo "临时文件: $temp_file"
# 使用完后删除
rm -f "$temp_file"

结果：生成一个类似 /tmp/tmp.xyz123 的临时文件。

文章元数据

羽毛 — Sun, 06 Sep 2026 00:00:00 GMT

元数据一览

frontmatter 里的字段在 src/content.config.ts 中定义。所有字段都是可选的——缺省时 schema 会给出默认值，但缺省越多，文章在列表里的表现就越不完整，所以标题、日期、标签建议每篇都写。

字段	类型	默认	说明
`title`	`string`	`"无标题"`	文章标题，显示在详情页与文章卡片
`date`	`string`/`Date`	无（不显示、排最后）	发布日期，经 `z.coerce.date()` 转为 `Date`，页面只显示日期部分
`description`	`string`	无	文章摘要，显示在卡片，同时用作详情页的 SEO meta description
`image`	`string`	无	封面图路径，显示在详情页标题下方与卡片右侧
`tags`	`string[]`	`[]`	标签数组，用于标签筛选与侧栏标签云
`pinned`	`boolean`	`false`	是否置顶，置顶文章排在列表最前并带图钉图标

其他博客常见的 categories / category / 分类 等字段在 schema 中会被放行（不会报错），但一律忽略，不参与分类也不展示。文章分类只由目录结构决定，详见分类系统。

核心字段

title

文章标题，字符串类型。显示在文章详情页标题和文章卡片中。不填时默认显示为「无标题」。

---
title: "我的第一篇文章"
---

date

发布日期。支持 YYYY-MM-DD（或任何能被 new Date() 解析的格式），schema 会自动转成 Date 类型。页面仅取日期部分按 YYYY-MM-DD 显示，并用于列表排序：置顶优先，同级按日期倒序。

不填 date 时文章不显示日期，且在排序时排在有日期的文章之后。

---
date: 2024-12-15
---

可选字段

description

文章摘要，字符串类型。显示在文章卡片中，同时作为详情页的 SEO meta description。

---
description: "这篇文章介绍了如何使用 CSS Grid 布局"
---

image

文章封面图路径，字符串类型。显示在文章详情页标题下方和文章卡片右侧。支持两种写法：

/ 开头：从 public/ 目录提供，如 /images/cover.png 对应 public/images/cover.png，原样引用不做处理。
相对路径（不以 / 开头）：视为本地图片，交给 astro:assets 压缩并重命名（产物在 /_astro/ 下）。路径以文章所在目录为基准解析，最终落在 src/ 内。例如位于 src/content/posts/2024/ 的文章写 ../../assets/images/x.jpg，实际指向 src/content/assets/images/x.jpg。

建议把图片统一放进 src/content/assets/images/ 或 public/，方便管理。

---
image: "/images/cover.png"
---

pinned

是否置顶，布尔类型。置顶文章会显示在列表最前面，并带有置顶图标。

---
pinned: true
---

默认值为 false。

完整示例

---
title: "CSS Grid 布局完全指南"
date: 2024-11-20
description: "深入理解 CSS Grid 布局，从基础到高级用法。"
image: "/images/css-grid-cover.png"
tags: ["CSS", "前端", "布局"]
pinned: false
---

Grid网格布局

羽毛 — Sun, 06 Sep 2026 00:00:00 GMT

一、开启 Grid 容器

1.1 开启网格布局 display: grid

匹配规则：将容器设为网格容器，所有直接子元素自动变为网格项目（grid items），默认按列排列，每列宽度由内容撑开。

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

.container {
    display: grid;
}

结果：四个子元素变成网格项目，默认排成一行四列（若容器宽度不够则自动溢出）。

1.2 行内网格容器 display: inline-grid

匹配规则：将容器设为行内网格容器，宽度由内容撑开，不独占一行。

<span class="container">
  <span>A</span>
  <span>B</span>
</span>

.container {
    display: inline-grid;
}

结果：容器宽度由内容撑开，与周围文字在同一行内显示，内部子元素按网格排列。

二、定义网格结构

2.1 划分列数及每列宽度 grid-template-columns

匹配规则：定义网格有多少列，以及每列的宽度。

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

.container {
    display: grid;
    grid-template-columns: 100px 200px 100px;  /* 三列，宽度分别为 100、200、100 */
}

结果：三列网格，第一列 100px，第二列 200px，第三列 100px。A 在第一列，B 在第二列，C 在第三列，D 自动折到下一行（隐式行）。

2.2 划分行数及每行高度 grid-template-rows

匹配规则：定义网格有多少行，以及每行的高度。

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 80px 120px;  /* 两行，高度分别为 80、120 */
}

结果：两行两列网格。第一行高 80px，第二行高 120px。

2.3 按比例分配剩余空间（fr 单位） grid-template-columns: 1fr 2fr

匹配规则：使用 fr（fraction）单位，将容器剩余空间按份数分配给各列（或各行）。

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;  /* 分成 4 份，中间占 2 份 */
}

结果：三列网格，容器剩余空间分成 4 份，A 和 C 各占 1/4，B 占 2/4（中间列是两侧的两倍宽）。

2.4 固定值 + fr 混合使用 grid-template-columns: 200px 1fr

匹配规则：列宽可以混合使用固定值和 fr 单位，第一列固定，其余列瓜分剩余空间。

<div class="container">
  <div>侧边栏</div>
  <div>主内容</div>
</div>

.container {
    display: grid;
    grid-template-columns: 200px 1fr;  /* 左侧固定 200px，右侧占满剩余空间 */
}

结果：左侧栏 200px 固定，右侧主内容自动填满容器剩余宽度（典型后台布局）。

2.5 重复相同模式 repeat() grid-template-columns: repeat(3, 1fr)

匹配规则：使用 repeat() 函数简化重复的列宽定义。

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 三列等宽，等价于 1fr 1fr 1fr */
}

结果：三列等宽，每列占 1/3 容器宽度。A、B、C 在第一行，D、E、F 在第二行。

2.6 按固定间距划分列 auto-fill 与 minmax() 配合实现响应式

匹配规则：使用 repeat(auto-fill, minmax(最小宽, 最大宽))，让浏览器自动决定能放下多少列，宽度不足时自动换行，实现响应式网格。

<div class="container">
  <div>卡片 1</div>
  <div>卡片 2</div>
  <div>卡片 3</div>
  <div>卡片 4</div>
  <div>卡片 5</div>
</div>

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

结果：每个卡片至少 200px 宽，容器宽了自动多放列，窄了自动减少列并换行。所有卡片等宽（1fr）。

2.7 命名网格区域 grid-template-areas

匹配规则：给网格区域起名字，然后用 grid-area 将子元素放入对应区域，实现可视化布局。

<div class="container">
  <div class="header">头部</div>
  <div class="sidebar">侧栏</div>
  <div class="main">主内容</div>
  <div class="footer">底部</div>
</div>

.container {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 80px 1fr 60px;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

结果：头部占一整行，侧栏（200px）和主内容（剩余空间）在第二行，底部占一整行。布局结构一目了然。

2.8 设置行与列之间的间距 gap

匹配规则：设置网格项目之间的行列间距，容器边缘不会产生间距。

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 10px;  /* 行间距 20px，列间距 10px */
}

结果：两行两列网格，项目之间横向间距 10px，纵向间距 20px，容器边缘没有间距。

三、父容器属性（控制整体对齐）

3.1 网格项目在单元格内的水平对齐 justify-items

匹配规则：控制所有网格项目在各自单元格内的水平对齐方式。默认值为 stretch（拉伸填满）。

<div class="container">
  <div style="width:50px;">A</div>
  <div style="width:80px;">B</div>
  <div style="width:60px;">C</div>
  <div style="width:90px;">D</div>
</div>

.container {
    display: grid;
    grid-template-columns: repeat(2, 200px);
    justify-items: center;  /* 水平居中 */
}

结果：每个网格项目在各自的 200px 宽单元格内水平居中，不再拉伸填满。

3.2 网格项目在单元格内的垂直对齐 align-items

匹配规则：控制所有网格项目在各自单元格内的垂直对齐方式。默认值为 stretch（拉伸填满）。

<div class="container">
  <div style="height:40px;">A</div>
  <div style="height:70px;">B</div>
  <div style="height:50px;">C</div>
  <div style="height:80px;">D</div>
</div>

.container {
    display: grid;
    grid-template-rows: repeat(2, 150px);
    align-items: center;  /* 垂直居中 */
}

结果：每个网格项目在各自的 150px 高单元格内垂直居中，不再拉伸填满。

3.3 整个网格在容器内的水平对齐 justify-content

匹配规则：当网格总宽度小于容器宽度时，控制整个网格区域在容器内的水平对齐方式。

<div class="container" style="width:600px;">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;  /* 总宽 300px，容器 600px，有剩余空间 */
    justify-content: center;  /* 整个网格水平居中 */
}

结果：三列网格作为一个整体在容器内水平居中，左右留白相等。

3.4 整个网格在容器内的垂直对齐 align-content

匹配规则：当网格总高度小于容器高度时，控制整个网格区域在容器内的垂直对齐方式。

<div class="container" style="height:500px;">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: 80px;  /* 总高 80px，容器 500px，有剩余空间 */
    align-content: center;  /* 整个网格垂直居中 */
}

结果：网格整体在容器内垂直居中，上下留白相等。

四、子项目属性（控制个体行为）

4.1 让某个项目横跨多列 grid-column

匹配规则：控制当前项目跨越几列。格式为 grid-column: 起始列 / 结束列（结束列号+1）。

<div class="container">
  <div class="span2">横跨两列</div>
  <div>B</div>
  <div>C</div>
</div>

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.span2 {
    grid-column: 1 / 3;  /* 从第 1 列开始，到第 3 列之前结束，即占第 1、2 列 */
}

结果：A 横跨第一列和第二列，B 在第三列，C 自动折到下一行。

4.2 让某个项目横跨多行 grid-row

匹配规则：控制当前项目跨越几行。格式为 grid-row: 起始行 / 结束行（结束行号+1）。

<div class="container">
  <div class="span2">竖跨两行</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 100px);
}
.span2 {
    grid-row: 1 / 3;  /* 从第 1 行开始，到第 3 行之前结束，即占第 1、2 行 */
}

结果：A 占第一行和第二行的第一列，B 在第一行第二列，C 在第二行第二列，D 自动新增一行。

4.3 使用命名区域定位项目 grid-area

匹配规则：将当前项目放入 grid-template-areas 定义的某个命名区域中。

<div class="container">
  <div class="header">头部</div>
  <div class="main">主内容</div>
  <div class="footer">底部</div>
</div>

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 80px 1fr 60px;
    grid-template-areas:
        "header"
        "main"
        "footer";
}
.header { grid-area: header; }
.main { grid-area: main; }
.footer { grid-area: footer; }

结果：三个项目分别占据上、中、下三个区域，header 高 80px，main 占满剩余空间，footer 高 60px。

4.4 控制单个项目的水平对齐 justify-self

匹配规则：单独覆盖父级 justify-items 的设置，控制当前项目在单元格内的水平对齐方式。

<div class="container">
  <div>A</div>
  <div class="right">B（靠右）</div>
  <div>C</div>
</div>

.container {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    justify-items: center;  /* 父级统一水平居中 */
}
.right {
    justify-self: end;  /* B 单独改为靠右对齐 */
}

结果：A 和 C 在各自单元格内水平居中，B 单独靠右。

4.5 控制单个项目的垂直对齐 align-self

匹配规则：单独覆盖父级 align-items 的设置，控制当前项目在单元格内的垂直对齐方式。

<div class="container">
  <div>A</div>
  <div class="bottom">B（贴底）</div>
  <div>C</div>
</div>

.container {
    display: grid;
    grid-template-rows: repeat(3, 150px);
    align-items: center;  /* 父级统一垂直居中 */
}
.bottom {
    align-self: end;  /* B 单独改为贴底对齐 */
}

结果：A 和 C 在各自单元格内垂直居中，B 单独贴在单元格底部。

五、现代增强

5.1 子网格继承父级网格线 subgrid

匹配规则：当子元素自身也是网格容器时，使用 subgrid 让它继承父级的列或行定义，实现嵌套网格与父级网格线对齐。

<div class="parent">
  <div class="child-grid">
    <div>子项 1</div>
    <div>子项 2</div>
    <div>子项 3</div>
  </div>
  <div>父级项目 B</div>
</div>

.parent {
    display: grid;
    grid-template-columns: 100px 1fr 100px;  /* 父级三列 */
}
.child-grid {
    display: grid;
    grid-template-columns: subgrid;  /* 继承父级的三列 */
    grid-column: 1 / 3;  /* 子网格占父级第 1 到第 3 列 */
}

结果：子网格内部的子项直接对齐父级的列线，不再重新计算列宽。适合表头与表体对齐的场景。

5.2 瀑布流/砖墙式排列 grid-template-rows: masonry

匹配规则：使用 masonry 值，让网格项目像瀑布流一样排列——项目按列填充，每列高度由内容决定，不再强制行高对齐。

<div class="container">
  <div style="height:150px;">A</div>
  <div style="height:200px;">B</div>
  <div style="height:100px;">C</div>
  <div style="height:250px;">D</div>
  <div style="height:120px;">E</div>
  <div style="height:180px;">F</div>
</div>

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: masonry;  /* 瀑布流模式 */
    gap: 16px;
}

结果：项目像 Pinterest 一样排列，每个项目高度不同，自动填充到当前最短的那一列下方，不再要求行高一致。

Flex弹性布局

羽毛 — Sat, 05 Sep 2026 00:00:00 GMT

一、开启 Flex 容器

1.1 开启弹性布局 display: flex

匹配规则：将容器设为弹性容器，所有直接子元素自动变成弹性项目（flex items），默认水平排列。

<div class="container">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

.container {
    display: flex;
}

结果：三个子元素水平排列在一行，高度自动拉伸对齐。

1.2 行内弹性容器 display: inline-flex

匹配规则：将容器设为行内弹性容器，宽度由内容撑开，不独占一行，子元素同样变为弹性项目。

<span class="container">
  <span>项目 A</span>
  <span>项目 B</span>
</span>

.container {
    display: inline-flex;
}

结果：容器宽度由内容撑开，与周围文字在同一行内显示，内部子元素水平排列。

二、父容器属性（控制整体排列）

2.1 水平从左到右排列 flex-direction: row

匹配规则：子元素沿主轴水平排列，方向为从左到右。这是默认值。

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

.container {
    display: flex;
    flex-direction: row;
}

结果：1、2、3 从左到右水平排列。

2.2 水平从右到左排列 flex-direction: row-reverse

匹配规则：子元素沿主轴水平排列，方向为从右到左。

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

.container {
    display: flex;
    flex-direction: row-reverse;
}

结果：3、2、1 从右到左水平排列（视觉顺序反转）。

2.3 垂直从上到下排列 flex-direction: column

匹配规则：子元素沿主轴垂直排列，方向为从上到下。

<div class="container">
  <div>顶部</div>
  <div>中间</div>
  <div>底部</div>
</div>

.container {
    display: flex;
    flex-direction: column;
}

结果：顶部、中间、底部从上到下垂直排列。

2.4 垂直从下到上排列 flex-direction: column-reverse

匹配规则：子元素沿主轴垂直排列，方向为从下到上。

<div class="container">
  <div>顶部</div>
  <div>中间</div>
  <div>底部</div>
</div>

.container {
    display: flex;
    flex-direction: column-reverse;
}

结果：底部、中间、顶部从下到上垂直排列（视觉顺序反转）。

2.5 子项靠左（起点）对齐 justify-content: flex-start

匹配规则：子元素在主轴起点对齐，剩余空间留在终点方向。这是默认值。

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

.container {
    display: flex;
    justify-content: flex-start;
}

结果：A、B、C 紧贴在容器左侧（起点），右侧留白。

2.6 子项靠右（终点）对齐 justify-content: flex-end

匹配规则：子元素在主轴终点对齐，剩余空间留在起点方向。

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

.container {
    display: flex;
    justify-content: flex-end;
}

结果：A、B、C 紧贴在容器右侧（终点），左侧留白。

2.7 子项整体居中 justify-content: center

匹配规则：子元素在主轴方向居中对齐，剩余空间在两侧均分。

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

.container {
    display: flex;
    justify-content: center;
}

结果：A、B、C 整体居中，左右留白相等。

2.8 子项两端对齐，中间等距 justify-content: space-between

匹配规则：第一个子元素贴起点，最后一个贴终点，其余子元素之间间距相等。

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

.container {
    display: flex;
    justify-content: space-between;
}

结果：A 贴左，C 贴右，B 在正中间，A-B 和 B-C 间距相等。

2.9 子项两侧间距相等 justify-content: space-around

匹配规则：每个子元素两侧的间距相等，边缘间距是中间间距的一半。

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

.container {
    display: flex;
    justify-content: space-around;
}

结果：A 和 B 之间、B 和 C 之间间距相等，A 左侧和 C 右侧的间距是中间的一半。

2.10 所有间距完全相等 justify-content: space-evenly

匹配规则：所有子元素之间的间距以及边缘间距完全相等。

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

.container {
    display: flex;
    justify-content: space-evenly;
}

结果：A 左侧、A-B 之间、B-C 之间、C 右侧四个间距完全相等。

2.11 子项拉伸填满容器高度 align-items: stretch

匹配规则：子元素在交叉轴方向拉伸填满容器高度（或宽度）。这是默认值。

<div class="container" style="height:200px;">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

.container {
    display: flex;
    align-items: stretch;
}

结果：A、B、C 的高度都被拉伸到 200px，填满容器。

2.12 子项顶部对齐 align-items: flex-start

匹配规则：子元素在交叉轴起点对齐（水平排列时就是顶部对齐）。

<div class="container" style="height:200px;">
  <div style="height:60px;">A</div>
  <div style="height:100px;">B</div>
  <div style="height:80px;">C</div>
</div>

.container {
    display: flex;
    align-items: flex-start;
}

结果：A、B、C 的顶部对齐在容器顶部，底部参差不齐。

2.13 子项底部对齐 align-items: flex-end

匹配规则：子元素在交叉轴终点对齐（水平排列时就是底部对齐）。

<div class="container" style="height:200px;">
  <div style="height:60px;">A</div>
  <div style="height:100px;">B</div>
  <div style="height:80px;">C</div>
</div>

.container {
    display: flex;
    align-items: flex-end;
}

结果：A、B、C 的底部对齐在容器底部，顶部参差不齐。

2.14 子项垂直居中 align-items: center

匹配规则：子元素在交叉轴方向居中对齐（水平排列时就是垂直居中）。

<div class="container" style="height:200px;">
  <div style="height:60px;">A</div>
  <div style="height:100px;">B</div>
  <div style="height:80px;">C</div>
</div>

.container {
    display: flex;
    align-items: center;
}

结果：A、B、C 在容器垂直方向居中对齐，顶部和底部的留白相等。

2.15 子项文字基线对齐 align-items: baseline

匹配规则：子元素按第一行文字的基线对齐，让不同字号文字视觉上整齐。

<div class="container" style="height:200px;">
  <div style="font-size:30px;">A</div>
  <div style="font-size:16px;">B</div>
  <div style="font-size:24px;">C</div>
</div>

.container {
    display: flex;
    align-items: baseline;
}

结果：A、B、C 的文字底部（基线）对齐在同一水平线上，不同字号的文字看起来整齐排列。

2.16 不换行，子项被压缩 flex-wrap: nowrap

匹配规则：子元素不换行，总宽度超过容器时自动压缩子元素。这是默认值。

<div class="container" style="width:300px;">
  <div style="width:120px;">A</div>
  <div style="width:120px;">B</div>
  <div style="width:120px;">C</div>
</div>

.container {
    display: flex;
    flex-wrap: nowrap;
}

结果：三个 120px 的项目挤在 300px 容器内，每个被压缩到约 100px。

2.17 换行，放不下折到下一行 flex-wrap: wrap

匹配规则：子元素总宽度超过容器时换行，放不下的折到下一行。

<div class="container" style="width:300px;">
  <div style="width:120px;">A</div>
  <div style="width:120px;">B</div>
  <div style="width:120px;">C</div>
</div>

.container {
    display: flex;
    flex-wrap: wrap;
}

结果：A 和 B 在第一行（各 120px），C 在第二行（120px），行首留有 60px 空隙。

2.18 换行，但行的顺序颠倒 flex-wrap: wrap-reverse

匹配规则：子元素换行，但行的顺序反转，第一行出现在最下面。

<div class="container" style="width:300px;">
  <div style="width:120px;">A</div>
  <div style="width:120px;">B</div>
  <div style="width:120px;">C</div>
</div>

.container {
    display: flex;
    flex-wrap: wrap-reverse;
}

结果：A 和 B 在第二行（下方），C 在第一行（上方）。

2.19 多行拉伸填满容器 align-content: stretch

匹配规则：当有多行时，行在交叉轴方向拉伸填满容器。这是默认值。

<div class="container" style="width:300px; height:300px; flex-wrap:wrap;">
  <div style="width:120px;">A</div>
  <div style="width:120px;">B</div>
  <div style="width:120px;">C</div>
  <div style="width:120px;">D</div>
</div>

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
}

结果：两行均匀拉伸，填满 300px 高度，各行高度自动分配。

2.20 多行整体如何对齐 align-content

匹配规则：当有多行时，控制行组在交叉轴方向的对齐方式，可选值与 justify-content 相同（flex-start、flex-end、center、space-between、space-around、space-evenly），默认值为 stretch。

<div class="container" style="width:300px; height:300px; flex-wrap:wrap;">
  <div style="width:120px;">A</div>
  <div style="width:120px;">B</div>
  <div style="width:120px;">C</div>
  <div style="width:120px;">D</div>
</div>

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

结果：两行作为一个整体在容器垂直方向居中。

2.21 设置子项之间的间距 gap

匹配规则：设置子元素之间的行列间距，容器边缘不会产生间距。

<div class="container" style="width:320px; flex-wrap:wrap;">
  <div style="width:100px;">A</div>
  <div style="width:100px;">B</div>
  <div style="width:100px;">C</div>
</div>

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 10px;  /* 行间距 20px，列间距 10px */
}

结果：子元素之间横向间距 10px，纵向间距 20px，容器边缘没有间距。

2.22 方向+换行合并写法 flex-flow

匹配规则：flex-direction 和 flex-wrap 的简写属性。

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

.container {
    display: flex;
    flex-flow: row wrap;  /* 水平排列 + 允许换行 */
}

结果：等价于 flex-direction: row; flex-wrap: wrap;。

三、子项目属性（控制个体行为）

3.1 让子项平分或按份数分配多余宽度 flex-grow

匹配规则：容器有多余空间时，子项目按比例分配剩余空间。默认值为 0（不放大）。

<div class="container" style="width:500px;">
  <div style="flex-grow:1;">A</div>
  <div style="flex-grow:2;">B</div>
  <div style="flex-grow:1;">C</div>
</div>

.container {
    display: flex;
}

结果：总剩余空间分成 4 份（1+2+1），A 分 1 份，B 分 2 份，C 分 1 份。B 的宽度是 A 和 C 的两倍。

3.2 容器变窄时子项按比例收窄 flex-shrink

匹配规则：容器空间不足时，子项目按比例缩小。默认值为 1（允许缩小）。

<div class="container" style="width:300px;">
  <div style="width:150px; flex-shrink:1;">A</div>
  <div style="width:150px; flex-shrink:3;">B</div>
</div>

.container {
    display: flex;
}

结果：总宽度 300px，两个项目各 150px，原本刚好。若容器缩到 200px，B（shrink:3）缩得比 A（shrink:1）更多。

3.3 设置子项的基础宽度（放大前的底子） flex-basis

匹配规则：在分配剩余空间之前，子项目占据的基础尺寸。默认值为 auto（即自身的 width/height）。

<div class="container" style="width:500px;">
  <div style="flex-basis:100px; flex-grow:1;">A</div>
  <div style="flex-basis:200px; flex-grow:1;">B</div>
</div>

.container {
    display: flex;
}

结果：A 先占 100px，B 先占 200px，剩余 200px 两人平分，最终 A = 200px，B = 300px。

3.4 放大/缩小/基础宽度三合一 flex

匹配规则：flex-grow、flex-shrink、flex-basis 的简写。默认值为 0 1 auto。

<div class="container" style="width:600px;">
  <div style="flex:1;">A</div>
  <div style="flex:2;">B</div>
  <div style="flex:1;">C</div>
</div>

.container {
    display: flex;
}

结果：空间分成 4 份，A 占 1/4，B 占 2/4，C 占 1/4。

flex: 1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; flex: none 等价于 0 0 auto（不放大也不缩小，宽度由内容决定）; flex: auto 等价于 1 1 auto（先按内容大小，再分配剩余空间）。

3.5 让某个子项单独不听父级对齐命令 align-self

匹配规则：单独覆盖父容器 align-items 的设置，控制当前项目在交叉轴上的对齐方式。默认值为 auto（继承父级）。

<div class="container" style="height:200px; align-items:center;">
  <div>A</div>
  <div style="align-self:flex-end;">B</div>
  <div>C</div>
</div>

.container {
    display: flex;
    align-items: center;  /* 父级统一垂直居中 */
}

结果：A 和 C 垂直居中，B 单独贴在底部。

3.6 不改变HTML顺序，仅调整显示顺序 order

匹配规则：控制子项目的视觉排列顺序。默认值为 0，数值越小越靠前。

<div class="container">
  <div style="order:2;">A</div>
  <div style="order:0;">B</div>
  <div style="order:1;">C</div>
</div>

.container {
    display: flex;
}

结果：视觉顺序为 B（order:0）、C（order:1）、A（order:2），DOM 顺序不变。

CSS文本与字体排版

羽毛 — Fri, 04 Sep 2026 00:00:00 GMT

一、字体样式（控制文字本身的样子）

1.1 设置字体族 font-family

匹配规则：决定文字使用什么字体。可以指定多个字体作为备选（用逗号隔开），浏览器从左到右依次尝试，直到找到系统里存在的那个。中文字体必须加引号，英文字体如果名字有空格也要加引号。

<p class="sans">这是无衬线字体，现代感强</p>
<p class="serif">这是衬线字体，适合正文阅读</p>
<p class="mono">这是等宽字体，适合代码</p>

.sans {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;  /* 中文用苹方/雅黑，都没有就回退到系统无衬线 */
}
.serif {
    font-family: Georgia, "Times New Roman", serif;  /* 衬线字体 */
}
.mono {
    font-family: "Fira Code", "Courier New", monospace;  /* 等宽字体 */
}

结果：第一段显示为现代圆润的无衬线字体，第二段显示为带笔锋装饰的衬线字体，第三段显示为每个字母宽度相同的等宽字体。

1.2 设置字体大小 font-size

匹配规则：控制文字的大小。可以使用 px（绝对）、rem（相对于根元素）、em（相对于父元素）、%（相对于父元素）等单位。

<p class="small">小号文字 12px</p>
<p class="normal">正常文字 16px（浏览器默认）</p>
<p class="large">大号文字 2rem（约 32px）</p>

.small {
    font-size: 12px;
}
.normal {
    font-size: 16px;  /* 大多数浏览器默认就是 16px，不写也行 */
}
.large {
    font-size: 2rem;  /* 16px × 2 = 32px */
}

结果：三个段落文字大小依次增大。实际开发中推荐用 rem，方便用户调整浏览器字号时整体缩放。

1.3 设置字体粗细 font-weight

匹配规则：控制文字的粗细。可以用数值（100~900，整百递增）或关键字（normal = 400，bold = 700）。

<p class="light">细体 300</p>
<p class="normal">常规 400（默认）</p>
<p class="bold">粗体 700（加粗）</p>
<p class="black">特粗 900</p>

.light {
    font-weight: 300;
}
.normal {
    font-weight: normal;  /* 等价于 400 */
}
.bold {
    font-weight: bold;    /* 等价于 700 */
}
.black {
    font-weight: 900;
}

结果：文字从细到粗依次变浓。注意：有些字体不支持所有粗细值，设置后可能不会变化。

1.4 设置字体样式（斜体） font-style

匹配规则：控制文字是否倾斜。通常用来表示强调、书名或引用。

<p class="italic">这段文字是斜体</p>
<p class="normal">这段文字是正体（默认）</p>

.italic {
    font-style: italic;  /* 使用字体的斜体版本 */
}
.normal {
    font-style: normal;  /* 恢复正常（取消斜体） */
}

结果：第一段倾斜，第二段正常。

1.5 字体简写 font（合并写法）

匹配规则：font-style、font-weight、font-size、line-height、font-family 的简写。必须按顺序写，且 font-size 和 font-family 是必填项。

/* 顺序：style weight size/line-height family */
p {
    font: italic bold 16px/1.8 "PingFang SC", sans-serif;
}

结果：等价于分别写了 font-style: italic; font-weight: bold; font-size: 16px; line-height: 1.8; font-family: “PingFang SC”, sans-serif;。节省代码量，但不建议新手用（容易写错顺序）。

二、文本布局（控制文字的排列方式）

2.1 设置文字水平对齐 text-align

匹配规则：控制文字在块级元素内的水平对齐方式。常用值：left（左对齐，默认）、center（居中）、right（右对齐）、justify（两端对齐——左右边缘都贴齐，适合大段文章）。

<div class="left">我是左对齐（默认）</div>
<div class="center">我是居中对齐</div>
<div class="right">我是右对齐</div>
<div class="justify">我是两端对齐，每行文字左右都贴边，适合长文章阅读，看起来更整齐。</div>

.left {
    text-align: left;
}
.center {
    text-align: center;
}
.right {
    text-align: right;
}
.justify {
    text-align: justify;
    width: 300px;
}

结果：文字分别靠左、居中、靠右、两端对齐。

2.2 设置文字装饰（下划线/删除线） text-decoration

匹配规则：给文字加装饰线。常用值：none（去掉下划线，用于超链接）、underline（下划线）、line-through（删除线）、overline（上划线）。

<a href="#" class="link">我是超链接，默认有下划线</a>
<a href="#" class="no-underline">我去掉了下划线</a>
<p class="del">原价 199 元</p>
<p class="sale">现价 99 元（带删除线）</p>

.link {
    text-decoration: underline;  /* 超链接默认就有，可以不写 */
}
.no-underline {
    text-decoration: none;  /* 最常用：去掉 a 标签的下划线 */
}
.del {
    text-decoration: line-through;  /* 删除线 */
}
.sale {
    text-decoration: line-through;
    color: #999;
}

结果：第一个链接有下划线，第二个没有。原价文字带删除线，表示已被划掉。

2.3 设置行高 line-height

匹配规则：控制两行文字之间的垂直距离（行距）。数值不带单位时表示当前字号的倍数（如 1.5 表示行高是字号的 1.5 倍）。行高也常用于单行文字的垂直居中。

<p class="tight">这是紧凑行高（1.2），文字挤在一起，阅读费力。</p>
<p class="comfort">这是舒适行高（1.8），适合正文阅读，眼睛不累。</p>
<div class="center-line">我用行高实现了垂直居中</div>

.tight {
    line-height: 1.2;  /* 字号 × 1.2，很挤 */
    font-size: 16px;
}
.comfort {
    line-height: 1.8;  /* 字号 × 1.8，宽松舒适 */
    font-size: 16px;
}
.center-line {
    line-height: 60px;  /* 行高等于容器高度，文字就垂直居中了 */
    height: 60px;
    background: #f0f0f0;
    text-align: center;
    border: 1px solid #ccc;
}

结果：第一段文字紧凑，第二段宽松。第三个盒子中的文字在 60px 高的容器中垂直居中。

2.4 设置字间距 letter-spacing

匹配规则：控制字符之间的间距（俗称”字距”）。正值让文字变疏，负值让文字变紧。

<p class="normal">正常字间距</p>
<p class="loose">疏散字间距（常用于标题）</p>
<p class="tight">紧凑字间距</p>

.normal {
    letter-spacing: normal;  /* 默认，0 */
}
.loose {
    letter-spacing: 4px;  /* 每个字之间增加 4px */
}
.tight {
    letter-spacing: -1px;  /* 字距缩小 1px，慎用负值 */
}

结果：第二段每个字之间的距离明显变大，适合做标题增加”高级感”。第三段文字略显拥挤。

三、文本溢出与换行（防止文字把布局撑坏）

3.1 设置换行方式 word-break

匹配规则：控制长单词或 URL 在容器边缘如何换行。默认情况下，长英文单词不会断，会溢出容器。

<div class="break-all">supercalifragilisticexpialidocious</div>
<div class="break-word">supercalifragilisticexpialidocious</div>
<div class="keep-all">这是一段很长的中文文字，它默认就可以在任意字符处换行</div>

.break-all {
    width: 100px;
    border: 1px solid #ccc;
    word-break: break-all;  /* 强行在任意字符处断开，连单词都会劈开 */
}
.break-word {
    width: 100px;
    border: 1px solid #ccc;
    word-break: break-word;  /* 尽量完整显示单词，实在放不下再断开 */
}
.keep-all {
    width: 100px;
    border: 1px solid #ccc;
    word-break: keep-all;  /* 中文/日文/韩文不断词，英文不断单词 */
}

结果：第一个盒子里的长单词被硬生生劈成多段，第二个盒子尽量保持单词完整再换行。

3.2 控制空白字符和换行 white-space

匹配规则：控制代码中的空格、换行符是否在页面上显示。默认情况下，连续空格会被压缩成一个，换行符会被忽略。

<div class="normal">Hello     World
换行被忽略了</div>
<div class="pre">Hello     World
换行保留了</div>
<div class="nowrap">这段文字很长很长，但就是不换行，会溢出容器</div>

.normal {
    white-space: normal;  /* 默认值：压缩空格，忽略换行 */
}
.pre {
    white-space: pre;     /* 保留空格和换行（类似 <pre> 标签） */
}
.nowrap {
    white-space: nowrap;  /* 强制不换行，超出容器也不换，搭配 text-overflow 使用 */
    width: 150px;
    border: 1px solid #ccc;
    overflow: hidden;     /* 配合溢出隐藏 */
}

结果：第一个盒子的多个空格被压缩成一个，换行失效。第二个盒子保留了多个空格和换行。第三个盒子文字死活不换行，直接溢出（或隐藏）。

3.3 溢出显示省略号（单行截断） text-overflow: ellipsis

匹配规则：当文字超出容器宽度时，在末尾显示 …。必须同时满足：容器有固定宽度、overflow: hidden、white-space: nowrap。

<div class="ellipsis">这是一段很长很长的文字，超出容器后会在末尾显示省略号</div>

.ellipsis {
    width: 200px;
    white-space: nowrap;     /* 强制不换行 */
    overflow: hidden;        /* 溢出的藏起来 */
    text-overflow: ellipsis; /* 用 ... 表示被藏掉的部分 */
    border: 1px solid #ccc;
    padding: 8px;
}

结果：宽 200px 的盒子只显示”这是一段很长很长的文字，超…”，末尾加三个点。这是日常开发高频使用的技巧，几乎每个列表标题都会用到。

CSS定位

羽毛 — Thu, 03 Sep 2026 00:00:00 GMT

一、定位类型（position 属性）

1.1 默认文档流定位 position: static

匹配规则：元素按照正常文档流从上到下、从左到右排列，top / right / bottom / left / z-index 等定位属性完全无效。这是所有元素的默认值。

<div class="box">静态定位（默认）</div>
<div class="box">我排在它下面</div>

.box {
    position: static;  /* 默认值，其实不用写 */
    width: 200px;
    padding: 20px;
    background: #e2eaf3;
    top: 50px;  /* 写了也没用，static 下 top 无效 */
}

结果：两个盒子一上一下正常排列，top: 50px 被完全忽略。绝大多数元素都是这种状态，只有当你需要”特殊位置”时，才改成其他定位值。

1.2 相对自身偏移 position: relative

匹配规则：元素依然占据原来的位置（其他元素不会挤过来），但你可以用 top / left 等属性让它相对于自己的原始位置进行偏移。视觉上它移动了，但”物理占位”还在原地。

<div class="box">正常盒子 A</div>
<div class="box offset">相对定位：向右下偏移</div>
<div class="box">正常盒子 C</div>

.box {
    width: 200px;
    padding: 20px;
    background: #e2eaf3;
    margin-bottom: 10px;
}
.offset {
    position: relative;
    top: 20px;    /* 向下移 20px */
    left: 40px;   /* 向右移 40px */
    background: #ffd6a8;
}

结果：中间的盒子向右下方偏移了，但它原来占的位置依然空在那里，A 和 C 之间的空隙就是证据。relative 最常用的场景是作为绝对定位子元素的参考容器（见 2.1）。

1.3 相对于最近定位祖先定位 position: absolute

匹配规则：元素完全脱离文档流（不再占据空间，其他元素会挤上来），然后相对于最近的非 static 定位祖先元素进行定位。如果所有祖先都是 static，则相对于整个浏览器窗口（）定位。

<div class="parent">
  <div class="box absolute">我是绝对定位</div>
  <div class="box">我是正常文档流中的兄弟</div>
</div>

.parent {
    position: relative;  /* 成为 absolute 子元素的参考物 */
    width: 400px;
    height: 200px;
    background: #f0f0f0;
    margin-bottom: 20px;
}
.absolute {
    position: absolute;
    bottom: 10px;   /* 距离父容器底部 10px */
    right: 20px;    /* 距离父容器右侧 20px */
    background: #ffb3b3;
    padding: 10px;
}
.box {
    padding: 10px;
    background: #b3d9ff;
}

结果：绝对定位的盒子出现在父容器的右下角（距离底部 10px，右侧 20px），它原本的位置被兄弟元素挤占（因为脱离文档流）。这是 absolute 最常见的用法：“父 relative + 子 absolute”，让子元素相对于父容器进行精确定位。

1.4 相对于浏览器窗口固定 position: fixed

匹配规则：元素完全脱离文档流，相对于浏览器窗口（视口）定位。页面滚动时，它纹丝不动，始终固定在屏幕的指定位置。

<div class="fixed-bar">我是固定导航，滚动页面我也一直在</div>
<div style="height:2000px; background:#f5f5f5;">往下滚动看看效果</div>

.fixed-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 20px;
    background: #333;
    color: #fff;
    z-index: 1000;  /* 确保盖在其他内容上面 */
}

结果：无论页面滚动到哪里，这个导航栏始终固定在屏幕顶部。常用于顶部导航、底部悬浮按钮、回到顶部按钮。

1.5 滚动到特定位置时吸顶 position: sticky

匹配规则：元素不脱离文档流（占位保留），但当你滚动页面，元素到达指定位置时，它会”粘”在那里不动，像吸住了一样。简单理解：relative 和 fixed 的结合体——没到位置时是 relative，到了阈值就变成 fixed。

<div class="header">页面头部内容</div>
<div class="sticky-nav">我是粘性导航，滚到我时我就吸顶</div>
<div style="height:2000px; background:#f5f5f5;">滚动看看效果</div>

.sticky-nav {
    position: sticky;
    top: 0;  /* 滚动到距离视口顶部 0px 时吸住 */
    padding: 15px 20px;
    background: #007bff;
    color: #fff;
    z-index: 100;
}

结果：页面滚动时，导航在到达顶部之前正常跟随页面滚动；一旦到达顶部，就固定在那里。常用于表格表头、分类导航、分段标题。

二、偏移与叠放

2.1 控制偏移位置 top / right / bottom / left

匹配规则：配合 position: relative / absolute / fixed / sticky 使用，控制元素在不同方向上的偏移距离。

<div class="parent">
  <div class="child">离四边各 20px</div>
</div>

.parent {
    position: relative;
    width: 400px;
    height: 200px;
    background: #f0f0f0;
}
.child {
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    background: #b3d9ff;
    padding: 10px;
}

结果：子元素被拉伸到距离父容器四边各 20px 的位置，相当于在父容器内”缩进去”一块。不一定要同时设四个方向，可以只用 top + left 来定点。

2.2 控制层叠顺序 z-index

匹配规则：当多个定位元素重叠时，z-index 决定谁在上面谁在下面。数值越大越靠上，默认值为 auto（相当于 0）。只有定位元素（position 不为 static）才生效。

<div class="box red">红色：z-index: 1</div>
<div class="box blue">蓝色：z-index: 3（最上层）</div>
<div class="box green">绿色：z-index: 2</div>

.box {
    position: absolute;
    width: 150px;
    height: 100px;
    padding: 10px;
    opacity: 0.8;
}
.red {
    top: 20px;
    left: 20px;
    background: red;
    z-index: 1;
}
.blue {
    top: 60px;
    left: 60px;
    background: blue;
    z-index: 3;  /* 数值最大，在最上面 */
    color: #fff;
}
.green {
    top: 100px;
    left: 100px;
    background: green;
    z-index: 2;
    color: #fff;
}

结果：三个盒子叠在一起，蓝色在最上层（z-index: 3），绿色在中间（2），红色在最底层（1）。z-index 只比较同一层叠上下文中的兄弟元素，父子之间的 z-index 比较要更复杂一些，但日常用”谁的数值大谁在上面”基本够用。

三、经典场景

3.1 子元素在父容器中居中定位（父 relative + 子 absolute + transform）

匹配规则：让绝对定位的子元素在父容器中完美居中（不管父容器多大）。结合 top: 50%; left: 50%; 加上 transform: translate(-50%, -50%)。

<div class="parent">
  <div class="child">我居中啦</div>
</div>

.parent {
    position: relative;
    width: 400px;
    height: 300px;
    background: #f0f0f0;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #007bff;
    color: #fff;
    padding: 20px 40px;
    border-radius: 8px;
}

结果：子元素无论在父容器中如何变化，始终位于正中心。这是最常用的绝对定位居中技巧。

3.2 固定底部按钮（fixed 悬浮在右下角）

匹配规则：让一个按钮始终固定在屏幕右下角，不随页面滚动移动。

.btn-fixed {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 15px 30px;
    background: #28a745;
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    z-index: 999;
}

结果：按钮始终在屏幕右下角，适合做”回到顶部”或”在线客服”悬浮按钮。

3.3 粘性表头（sticky 让表格头吸顶）

匹配规则：表格滚动时，表头始终固定在顶部，方便查看数据对应的列名。

<table>
  <thead class="sticky-header">
    <tr><th>姓名</th><th>年龄</th><th>城市</th></tr>
  </thead>
  <tbody>
    <!-- 很多行数据 -->
  </tbody>
</table>

.sticky-header {
    position: sticky;
    top: 0;
    background: #333;
    color: #fff;
}

结果：滚动表格数据时，表头会在到达页面顶部后固定不动。

CSS盒模型

羽毛 — Wed, 02 Sep 2026 00:00:00 GMT

一、盒模型核心

1.1 控制宽高是否包含内边距和边框 box-sizing

匹配规则：决定当你给元素设置 width / height 时，这个尺寸算的是”内容区域”的尺寸，还是”内容 + 内边距 + 边框”的总尺寸。

<div class="box content-box">宽高=内容区</div>
<div class="box border-box">宽高=总尺寸</div>

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid #333;
    margin-bottom: 20px;
    background: #f0f0f0;
}

.content-box {
    box-sizing: content-box;  /* 默认值：200px 只算内容 */
}

.border-box {
    box-sizing: border-box;   /* 200px = 内容 + padding + border */
}

结果：

· content-box（默认）：内容区宽 200px。加上左右 padding（40px）和左右边框（10px），实际总宽度变成 250px。这常常导致元素溢出容器，是新手最易踩的坑。 · border-box：内容区被压缩到 200 - 40 - 10 = 150px，实际总宽度始终是 200px。更符合直觉，因此实际开发中强烈推荐全局设置 * { box-sizing: border-box; }。

1.2 设置内容区域的宽高 width / height

匹配规则：直接设置盒子”内容区域”的宽度和高度（具体是否包含 padding/border，由上面的 box-sizing 决定）。

<div class="box">固定宽高 200x100</div>
<div class="box-auto">宽高由内容撑开</div>

.box {
    width: 200px;
    height: 100px;
    background: #b3d9ff;
}
.box-auto {
    width: auto;   /* 默认，块级元素撑满父容器宽度 */
    height: auto;  /* 默认，高度由内容自动撑开 */
    background: #ffe6b3;
}

结果：第一个盒子固定宽 200px、高 100px。第二个盒子宽度填满父容器，高度随文字内容自动增加。

1.3 限制最大/最小尺寸 min-width / max-width / min-height / max-height

匹配规则：给元素设置一个”弹性范围”，防止内容过多把盒子撑得太离谱，或者窗口缩小时元素变得看不见。

<div class="box">内容很多时，最大宽度限制为 300px，超过则换行或溢出</div>

.box {
    min-width: 100px;   /* 缩小时不小于 100px */
    max-width: 300px;   /* 放大时不超过 300px */
    min-height: 50px;   /* 内容少时也至少 50px 高 */
    background: #d4edda;
}

结果：盒子宽度在 100px 到 300px 之间自适应，高度至少 50px，内容多了再继续撑高。

二、内部空间与边框

2.1 设置内容与边框的内部间距 padding

匹配规则：在内容区域和边框之间增加透明空间。注意：padding 会撑大盒子（除非你设置了 box-sizing: border-box）。

<div class="box">这个盒子有内边距，文字不会贴边</div>
<div class="box no-padding">这个盒子没内边距，文字紧贴边框</div>

.box {
    width: 200px;
    padding: 20px 30px;  /* 上下 20px，左右 30px */
    border: 1px solid #999;
    background: #f8f9fa;
}
.no-padding {
    padding: 0;  /* 去掉内边距 */
}

结果：第一个盒子文字与边框之间有 20px（上下）和 30px（左右）的呼吸空间。第二个盒子文字直接贴着边框，看起来很拥挤。

/* padding 的四种写法 */
padding: 20px;          /* 四边相同 */
padding: 10px 20px;     /* 上下 10，左右 20 */
padding: 10px 20px 30px;/* 上 10，左右 20，下 30 */
padding: 10px 20px 30px 40px; /* 上 10，右 20，下 30，左 40（顺时针） */

2.2 设置元素边框线 border

匹配规则：在内边距（或内容）外围画一条线。边框会占据空间，同样会撑大盒子（除非使用 border-box）。

<div class="box">我有边框</div>
<div class="box no-border">我没有边框</div>

.box {
    width: 200px;
    padding: 20px;
    border: 3px solid #007bff;  /* 宽度 3px，实线，蓝色 */
}
.no-border {
    border: none;  /* 无边框 */
}

结果：第一个盒子外围有一条蓝色的线包裹。第二个盒子无边框。

/* 常见 border 写法 */
border: 1px solid #ccc;   /* 最常用：细实线灰色 */
border: 2px dashed red;   /* 红色虚线边框 */
border: 4px dotted green; /* 绿色点状边框 */

/* 单独控制某一边 */
border-top: 1px solid #000;
border-bottom: 2px dashed #666;

三、外部空间

3.1 设置元素之间的外部间距 margin

匹配规则：在当前元素外部增加透明空间，用于拉开与其他元素的距离。注意：margin 不会撑大盒子本身，但会影响盒子在页面中占用的总空间。

<div class="box">我有下边距 30px，下面的元素会离我远一些</div>
<div class="box">我是紧跟着的第二个盒子</div>

.box {
    width: 200px;
    padding: 10px;
    background: #e2eaf3;
    margin-bottom: 30px;  /* 当前盒子下方留 30px 空白 */
}

结果：第一个盒子和第二个盒子之间拉开了 30px 的距离。

/* margin 写法与 padding 相同 */
margin: 20px;          /* 四边相同 */
margin: 10px 20px;     /* 上下 10，左右 20 */
margin: 10px 20px 30px 40px; /* 上 10，右 20，下 30，左 40（顺时针） */

/* 常用技巧：让块级元素水平居中 */
margin: 0 auto;        /* 前提：元素有固定宽度，且父容器宽度大于它 */

3.2 注意：相邻外边距合并（Margin Collapse）

匹配规则：当两个块级元素垂直相邻时，它们的外边距不会相加，而是取两者中的最大值。这是很多新手觉得”间距不对”的根本原因。

<div class="box-a">下边距 30px</div>
<div class="box-b">上边距 20px</div>
<!-- 两个盒子之间的实际间距不是 30+20=50px，而是 30px（取大的那个） -->

.box-a {
    margin-bottom: 30px;
}
.box-b {
    margin-top: 20px;
}

结果：两个盒子的距离不是 50px，而是 30px（两者取大）。如果你想要 50px，只需给其中一个设置 50px 即可，或使用 padding 代替部分 margin。Flex 和 Grid 容器内的子项不会有外边距合并问题，这也是它们受欢迎的原因之一。

3.3 让元素水平居中 margin: 0 auto

匹配规则：给块级元素设置左右外边距为 auto，浏览器会自动平分剩余空间，从而实现水平居中。

<div class="parent">
  <div class="child">我在父容器中水平居中</div>
</div>

.parent {
    width: 400px;
    background: #f0f0f0;
}
.child {
    width: 200px;
    margin: 0 auto;  /* 左右自动平分剩余空间 */
    background: #b3d9ff;
    text-align: center;
}

结果：子元素在父容器中水平居中，左右留白相等。这是最常用的块级居中方式。

CSS At-rule（@规则）

羽毛 — Tue, 01 Sep 2026 00:00:00 GMT

At-rule 是 CSS 中以 @ 符号开头的指令式语句，用于控制样式表行为、定义变量、引入外部资源或设置条件规则。

与普通样式规则的区别：

样式规则：选择器 { 属性: 值; } —— 直接给元素施加样式
At-rule：@标识符规则内容; 或 @标识符 { ... } —— 告诉 CSS 引擎“在什么条件下做什么事”

一、基础声明类

1.1 @charset —— 声明字符编码

匹配规则：指定样式表使用的字符编码，必须写在文件最最开头，且前面不得有任何字符。

@charset "UTF-8";

结果：样式表使用 UTF-8 编码解析。如果有多个 @charset 被声明，只有第一个生效。

1.2 @import —— 引入外部样式表

匹配规则：将另一个 CSS 文件的内容导入当前样式表，必须写在文件顶部（@charset 之后、其他规则之前）。

@import url("reset.css");
@import "theme.css";

结果：reset.css 和 theme.css 的内容被合并到当前样式表中。注意：每多一个 @import 就多一个 HTTP 请求，生产环境建议用构建工具合并。

1.3 @namespace —— 声明命名空间

匹配规则：为样式表定义默认命名空间或命名空间前缀，选择器仅在命名空间匹配时才生效。主要用于 XML/HTML 混合场景（如 SVG、MathML）。

@namespace svg "http://www.w3.org/2000/svg";
svg|a { color: red; }

结果：只有 SVG 命名空间下的 <a> 元素变红。

二、条件组规则

2.1 @media —— 媒体查询

匹配规则：根据设备特征（视口宽度、屏幕类型等）条件性地应用样式，做响应式的核心工具。

@media (max-width: 768px) {
  .container { flex-direction: column; }
}

@media print {
  .nav { display: none; }
}

结果：视口宽度 ≤ 768px 时容器变为纵向排列；打印时导航栏自动隐藏。

2.2 @supports —— 特性检测

匹配规则：检测浏览器是否支持某个 CSS 特性，支持时才应用内部样式。

@supports (display: grid) {
  .container { display: grid; }
}
@supports not (display: grid) {
  .container { display: flex; }
}

结果：支持 Grid 的浏览器用 Grid 布局，不支持的用 Flex 降级。

2.3 @container —— 容器查询

匹配规则：根据父容器的尺寸（而非视口）条件性地应用样式。首先需要在容器元素上声明 container-type 属性。

.post {
  container-type: inline-size;
}

.card h2 { font-size: 1em; }

@container (width > 700px) {
  .card h2 { font-size: 2em; }
}

结果：当 .post 容器宽度大于 700px 时，卡片标题字体放大为 2em。

三、资源与定义类

3.1 @font-face —— 自定义字体

匹配规则：定义服务器上的字体文件位置及样式特征，让页面可以使用非系统默认字体。

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
  font-weight: 400;
}
body { font-family: "MyFont", sans-serif; }

结果：页面文字使用 myfont.woff2 渲染。

3.2 @keyframes —— 定义动画关键帧

匹配规则：定义一个动画序列，配合 animation 属性使用。

@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.box { animation: slide-in 0.5s ease; }

结果：.box 元素从左侧滑入，持续 0.5 秒。

3.3 @property —— 注册自定义属性

匹配规则：显式注册一个 CSS 自定义属性（变量），指定其类型、初始值和继承行为，属于 CSS Houdini API 的一部分。

@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
.box { color: var(--my-color); }

结果：—my-color 被注册为只接受 <color> 类型值的变量，默认值为 #c0ffee。

四、打印与分页

4.1 @page —— 打印页面样式

匹配规则：修改打印或导出为 PDF 时的页面布局，包括尺寸、方向和边距。

@page {
  size: A4 landscape;
  margin: 2.54cm;
}

@page :first {
  margin-top: 3cm;
}

@page :right {
  margin-left: 4cm;
}

结果：打印时页面为 A4 横向，首页顶部边距 3cm，右侧页左边距 4cm。

五、级联与作用域管理

5.1 @layer —— 样式层级管理

匹配规则：将样式分配到指定的“层”中，控制不同层之间的优先级顺序。后声明的层优先级更高，且层之间的优先级高于选择器权重。

/* 先声明层的顺序（越靠后优先级越高） */
@layer reset, theme, components;

@layer reset {
  * { margin: 0; }
}
@layer theme {
  .btn { background: blue; }
}
@layer components {
  .btn { background: red; }  /* 覆盖 theme 层的蓝色 */
}

结果：按钮背景为红色（components 层优先级高于 theme 层），无需 !important。未定义在层中的样式优先级最高。

5.2 @scope —— 样式作用域

匹配规则：将样式限制在指定的 DOM 子树内，防止样式泄漏到全局，同时避免写过于具体的选择器。

@scope (.card) {
  /* 只作用于 .card 内部的 .title */
  .title { font-size: 1.5rem; }
}

@scope (.article-body) to (figure) {
  /* 从 .article-body 开始，到 figure 之前停止 */
  img { border: 5px solid black; }
}

结果：第一个例子中只有 .card 内部的 .title 生效；第二个例子中只有 .article-body 内、figure 之前的 img 生效。

六、计数器样式

6.1 @counter-style —— 自定义计数器

匹配规则：定义自定义列表计数器样式，扩展预定义的列表样式。

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

ul { list-style-type: thumbs; }

结果：列表项标记变为 👍 图标。

分类系统

羽毛 — Mon, 31 Aug 2026 00:00:00 GMT

概述

本博客的分类只由目录结构决定：把文章放进 src/content/posts/ 下某个目录，该目录路径就是文章的分类，无需在 frontmatter 里写任何分类字段。不识别其他博客的 categories / category 等字段。

目录结构分类

将文章放入对应目录，目录路径即分类路径，分类页与文章 URL 都与目录一一对应：

src/content/posts/
├── tech/
│   ├── frontend/
│   │   ├── css-grid.md   → 分类 tech/frontend，URL /posts/tech/frontend/css-grid/
│   │   └── ...
│   └── typescript.md     → 分类 tech，URL /posts/tech/typescript/
└── life/
    └── travel.md         → 分类 life，URL /posts/life/travel/

规则：

文章所在目录相对 src/content/posts/ 的路径就是它的分类，侧栏分类树按目录自动生成、递归展开
分类可嵌套任意层级，每个中间目录都是可访问的分类页
直接放在 src/content/posts/ 根目录下的文章没有分类
分类页 URL 与文章页共用 /posts/ 前缀：/posts/{分类路径}/

分类显示名

目录名默认就是分类显示名；想自定义显示名或补上描述，在该目录下放一个 index.json 即可，name 会覆盖目录名作为显示名：

src/content/posts/devnotes/
├── index.json      ← devnotes 分类的配置
├── css/
│   ├── index.json  ← devnotes/css 分类的配置
│   ├── at-rule.md
│   └── selector.md

devnotes/index.json（当前真实内容）：

{
  "name": "开发速查",
  "description": "本分类是专门给我自己做的，方便开发时查文档，本分类下的文档偏向于教学性质，感兴趣的也可以看看"
}

而 devnotes/css/index.json 把 name 配成了 "CSS"，所以该分类在侧栏与分类页显示为 CSS 而非目录名 css。

字段	类型	必填	说明
`name`	`string`	否	分类显示名；不写则用目录名
`description`	`string`	否	分类描述

index.json 只是目录配置，不会当作文章发布；同一目录下可以既有配置又有文章。

标签与分类的区别

	分类	标签
组织方式	目录结构（树形）	扁平结构（横向关联）
定义位置	文章所在目录	frontmatter `tags`
一篇文章	属于所在目录的单一分类路径	可以有多个标签
URL	`/posts/tech/frontend/`	`/posts/tag/CSS/`

---
tags: ["CSS", "布局", "教程"]
---

从其他平台导入文章

本主题不解析任何其他博客的分类字段，从其他平台导入时先把文件整理成上面的目录结构即可（后续会提供迁移工具辅助整理）。