1 《HTML标签分类与display转换：布局基础打牢》
1.1 标签三大分类（核心）
1.2 块元素（Block）
- 1.1.1 特点
- 独占一行
- 可以设置宽度和高度
- 1.1.2 常见标签
- div、p、h1 ~ h6
- 1.1.3 示例
块元素1
块元素2
👉 效果：一行一个
1.3 行内元素（Inline）
- 1.1.2 特点
- 不换行（多个在一行）
- 宽高设置无效
- 1.1.3 常见标签
- span、a
- 1.1.4 示例
文字1
文字2
👉 效果：一行显示
1.4 行内块元素（Inline-block）
- 1.1.3 特点
- 在一行显示
- 可以设置宽高
- 1.1.4 常见标签
- img、input
- 1.1.5 示例
👉 效果：一行 + 可控大小
2 三种元素对比（必须搞清）
2.1 核心对比表
| 类型 | 是否换行 | 宽高是否有效 |
|---|---|---|
| 块元素 | ✔ | ✔ |
| 行内元素 | ❌ | ❌ |
| 行内块元素 | ❌ | ✔ |
2.2 一句话记忆（你用这个）
- 块：霸道（独占一行）
- 行内：温顺（挤在一起）
- 行内块：又能挤又能控大小
3 元素转换（display 核心）
3.1 转为行内块（最常用）
span {
display: inline-block;
width: 300px;
height: 300px;
background-color: deeppink;
}
- 作用
- 让 span 可以设置宽高
- 但仍然一行显示
3.2 转为块元素
span {
display: block;
}
- 效果
- 独占一行
- 宽高有效
3.3 转为行内元素
div {
display: inline;
}
- 效果
- 不换行
- 宽高失效
4 重要补充（文档细节整合）
4.1 行内块 + 行高技巧（垂直居中）
span {
display: inline-block;
width: 400px;
height: 100px;
font: normal 700 30px/100px '华文仿宋';
}
- 4.1.1 核心点
30px/100px：- 30px → 字体大小
- 100px → 行高
👉 行高 = 容器高度 → 文字垂直居中
4.2 display总结（必须记）
- 4.2.1 三大转换
inline-block → 行内块（最常用）
block → 块元素
inline → 行内元素
4.3 使用注意（实战）
- 转换元素会影响布局
- 不要乱改（特别是 div → inline）
5 本章核心总结（必须掌握）
5.1 三类元素本质
- 块：用于布局
- 行内：用于文字
- 行内块：用于组件（图片/按钮）
5.2 display本质
👉 display = 控制元素“表现形式”
5.3 实战最重要能力
你必须能做到：
- 看标签 → 判断类型
- 用 display → 改布局
- 用 inline-block → 做横向排列
5.4 高频应用场景
- 导航栏（横排） → inline-block
- 按钮 → 行内块
- 布局容器 → block
5.5 一句话总结
👉 布局本质 = 控制元素如何排布（display）