块级与行内元素

HTML 元素分两类：块级独占一行，行内不换行。

学完本章你将： 掌握块级 vs 行内区别、display 属性改变行为。

对比

html

<!-- 块级元素：独占一行 -->
<p>段落 1</p>
<p>段落 2</p>
<div>这是一个 div</div>
<h3>标题</h3>

<!-- 行内元素：同在一行 -->
<span>行内 A</span>
<span>行内 B</span>
<a href="#">链接</a>
<strong>加粗</strong>

常见分类

块级元素行内元素

-

`

`` ``

`` ``

``
` `	``

用 display 改变行为

html

<!-- 行内元素变块级 -->
<span style="display: block;">现在独占一行了</span>

<!-- 块级元素变行内 -->
<div style="display: inline;">现在不换行了</div>

<!-- inline-block：不换行但可设宽高 -->
<span style="display: inline-block; width: 100px;">内联块</span>

🛠️ 学完试试这些工具

📄HTML 美化工具格式化混乱的 HTML 代码 🏷️HTML 实体转换实体编码 ↔ 字符互转 📋JSON 格式化处理 HTML 中的 JSON 数据 🎨颜色转换器HEX/RGB/HSL 颜色转换

HTML 列表

div 与 span