CSS 学到第二天，开始明显感觉：
页面不是写出来的，是“拼”出来的。今天这一篇，主要解决三个核心问题：
- 我怎么又快又准地写 HTML / CSS？
- 我怎么精确选中想要的元素？
- 我怎么控制元素怎么显示、怎么铺背景？
一、Emmet 语法：前端效率神器 🚀
1️⃣ Emmet 是什么？
Emmet 的前身是 Zen Coding，它通过缩写 + Tab 的方式，大幅提升 HTML / CSS 编写效率。
👉 VS Code 已内置，无需安装
2️⃣ 快速生成 HTML 结构
| 需求 | 写法 |
|---|---|
| 生成一个 div | div + Tab |
| 生成多个元素 | div*3 |
| 父子关系 | ul > li |
| 兄弟关系 | div + p |
| 带 class | .box |
| 带 id | #app |
| 自增类名 | li.item$*3 |
| 写内容 | p{我是内容} |
📌 示例：
ul>li.item$*3
生成结果：
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
3️⃣ 快速生成 CSS
Emmet 对 CSS 同样友好：
w200 → width: 200px;
h100 → height: 100px;
lh26px → line-height: 26px;
bgc → background-color
👉 写 CSS 不再是体力活
4️⃣ 自动格式化代码
- 手动格式化：
Shift + Alt + F - 保存自动格式化（推荐）
"editor.formatOnType": true,
"editor.formatOnSave": true
二、CSS 复合选择器
1️⃣ 什么是复合选择器？
复合选择器 = 基础选择器的组合
它让我们可以：
- 选得更准
- 写得更少
- 结构更清晰
常见的复合选择器：
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
2️⃣ 后代选择器（非常重要）
📌 选择某个元素内部的所有后代
div p {
color: red;
}
特点：
- 用 空格 隔开
- 选的是 后面的元素
- 不限层级（儿子、孙子都算）
👉 最常用的选择器，没有之一
3️⃣ 子选择器（亲儿子）
📌 只选最近一层子元素
div > p {
color: blue;
}
特点：
- 用
> - 只选 亲儿子
- 孙子不管
👉 可以理解为：
“我只管我亲生的”
4️⃣ 并集选择器（一起改）
📌 给多组元素设置同样的样式
h1, h2, p {
color: pink;
}
特点：
- 用
, - 常用于统一风格
5️⃣ 伪类选择器
伪类选择器用于描述元素的特殊状态。
a:hover {
color: red;
}
特点：
- 使用
: - 不是真实存在的类
6️⃣ 链接伪类（LVHA 顺序）
a:link { }
a:visited { }
a:hover { }
a:active { }
📌 必须按 LVHA 顺序写
记忆口诀：
- love hate
- lv 包包 hao
7️⃣ :focus 伪类
input:focus {
border-color: red;
}
📌 常用于表单输入框获取焦点时的样式
三、CSS 显示模式
1️⃣ 为什么要学显示模式？
因为：
- 有的元素独占一行
- 有的一行能放多个
- 有的能设置宽高，有的不行
2️⃣ 块级元素（block）
常见：
div、p、h1~h6、ul、li
特点：
- 独占一行
- 宽高、内外边距都能设置
- 默认宽度 100%
📌 div 是最典型的块元素
3️⃣ 行内元素（inline）
常见：
a、span、strong、em
特点：
- 一行显示多个
- 不能设置宽高
- 宽度由内容决定
⚠️ 注意：
- a 标签里不能再套 a
4️⃣ 行内块元素（inline-block）
常见：
img、input、td
特点：
- 一行显示多个
- 可以设置宽高
- 兼具块级 + 行内特点
5️⃣ 显示模式转换
display: block;
display: inline;
display: inline-block;
📌 常见用途：
- 扩大 a 标签点击范围
- 图片布局
6️⃣ 单行文字垂直居中
📌 经典技巧
line-height = height
原理：
行高的上下空隙把文字“挤”到中间
四、CSS 背景属性
1️⃣ 背景颜色
background-color: pink;
默认是 transparent
2️⃣ 背景图片
background-image: url(images/logo.png);
📌 常用于：
- logo
- 装饰图
- 大背景
3️⃣ 背景平铺
background-repeat: no-repeat;
4️⃣ 背景位置
background-position: center top;
background-position: 20px 30px;
规则总结：
- 一个值：x，y 默认居中
- 两个值：x y
5️⃣ 背景固定
background-attachment: fixed;
6️⃣ 背景合写
background:
#000
url(bg.png)
no-repeat
center center
fixed;
7️⃣ 背景半透明（CSS3）
background: rgba(0, 0, 0, .3);
📌 注意：
- 只影响背景
- 内容不透明
- IE9+ 支持（现在不用太纠结兼容）
🧠 总结
第二天 CSS 的关键词只有三个：
效率 · 精准 · 布局
- Emmet：让你写得飞快
- 复合选择器：让你选得够准
- 显示模式 + 背景：让页面真正“站起来”
📌 CSS 不难，难的是理解规则 + 多敲
