一、核心分类对比表（必背）
| 分类 | 特点 | 常见元素 | CSS默认display值 |
|---|---|---|---|
| 块级元素 | 独占一行，可设置宽高 | div, h1-h6, p, ul, ol, li, section, article, table | block |
| 行内元素 | 同行显示，内容决定宽度，不可设宽高 | span, a, strong, em, b, i, code, img（特殊）, input（特殊） | inline |
| 空元素 | 无闭合标签，不能包含内容 | br, hr, img, input, link, meta, area, base | - |
二、特殊元素说明（易错点）
1. 行内元素中的替换元素
<img>, <input>, <select>, <textarea>, <button>
特点：
✅ 可设置宽高（表现类似inline-block）
✅ 内容由外部资源或用户输入决定
三、代码示例验证
<!-- 块级元素 -->
<div style="background: #eee">块级元素独占一行</div>
<p>段落也是块级</p>
<!-- 行内元素 -->
<span style="width: 100px">设置宽度无效</span>
<a href="#">链接同行显示</a>
<!-- 替换元素特例 -->
<img src="logo.png" style="width: 100px"> <!-- 可设宽高 -->
<input type="text" style="height: 30px"> <!-- 可设高度 -->
<!-- 空元素正确写法 -->
<br> <!-- 正确，无需闭合标签 -->
<img src="test.jpg"> <!-- 正确 -->
<link rel="stylesheet" href="style.css"> <!-- 正确 -->
四、高频面试题精讲
1. 如何让行内元素支持宽高？
.inline-block {
display: inline-block; /* 转换为行内块 */
width: 200px;
height: 50px;
}
2. <div>放在<a>标签里合法吗？
<!-- HTML5允许，但需正确结构 -->
<a href="#">
<div>块级内容</div>
</a>
注意：<a>不能嵌套另一个<a>或其他交互元素（如<button>）
3. 空元素能否添加内容？
<br>内容</br> ❌ 错误写法，浏览器会忽略内容
<input>文本</input> ❌ 输入框内容应通过value属性设置
五、记忆口诀
"块级独占撑满行，行内同行不设宽
空元素无闭合标签，替换元素特例存"
面试时如果被问到，可以这样回答：
"块级元素如div会独占一行且可设宽高，行内元素如span同行显示但默认不能设宽高。空元素像img没有闭合标签，而替换元素如input虽然属于行内但可以设置尺寸。"
