CSS 元素类型与 display 属性
核心前提（90% 新手的误区）
标签的「块/行内/行内块」属性不是天生固定的，是浏览器给标签默认加的 display CSS 属性决定的，你随时可以手动改 display 值切换类型。不用死记标签分类，记 3 种类型的规则即可。
三类元素的核心区别
| 对比维度 | 块级 (display:block) | 行内 (display:inline) | 行内块 (display:inline-block) |
|---|---|---|---|
| 宽高控制 | 默认撑满父容器，可手动设置宽高、所有内外边距 | 宽高完全由内容决定，手动设宽高无效、垂直边距无效 | 可手动设置宽高、所有内外边距（和块级一致） |
| 排列规则 | 独占一行，多个默认从上到下堆叠 | 和其他行内/行内块元素排在同一行，放不下才换行 | 和其他行内/行内块元素排在同一行（和行内一致） |
| 嵌套规则 | 可嵌套所有类型元素（特殊：p 标签不能嵌套块级） | 只能嵌套行内元素，不能嵌套块级 | 可嵌套所有类型 |
常用默认对应标签（仅作参考，不用死记）
- 块级：div、p、h1~h6、section、header、ul/li
- 行内：span、a、strong、label
- 行内块：img、input、button
Tailwind 对应工具类
T3 项目全用 Tailwind，不用写原生 CSS，直接记对应类即可：
| 效果 | Tailwind 类 | 常用场景 |
|---|---|---|
| 转块级 | class="block" | 让 a 标签占满整行可点击 |
| 转行内 | class="inline" | 让 div 不换行 |
| 转行内块 | class="inline-block" | 需要设宽高但又要同行排列 |
落地练习
- 写 3 个 div 分别加红/绿/蓝背景，验证是不是默认独占一行
- 写 3 个 span 分别加红/绿/蓝背景，给它们加
width:100px;height:100px，验证宽高不生效、排在同一行 - 给上面的 span 加
display:inline-block，验证宽高生效且还在同一行 - 用 Tailwind 的工具类重写上面 3 个效果
下一步：学完本节后进入 盒模型，直接衔接 Flex/Grid 布局。