1. 块级元素 (Block)
特点： 霸道总裁。无论内容多少，都要独占一行。宽度默认撑满父容器。
我是 <div>，这一行归我了！
我是 <p>，哪怕我只有一个字，我也要换行！
谁也别想站我旁边！
常见块级恶霸：
<div>, <p>, <h1>-<h6>, <ul>, <li>, <header>, <footer>
2. 行内元素 (Inline)
特点： 随和的小弟。只占内容所需的宽度，愿意和其他人挤在同一行。
我是 <span>
我也是
大家挤一挤
<a>链接也是
<b>加粗也是
常见行内小弟：
<span>, <a>, <img>, <b>, <i>, <strong>, <em>
3. 容器之王 <div> vs <span>
这两个标签本身没有任何语义，它们纯粹是为了布局和样式而生的容器。
📦
<div>
Division (分割)。 最常用的块级容器。用来把网页切成大块，比如头部、侧边栏、内容区。
它是网页的纸箱子。
🏷️
<span>
Span (跨度)。 最常用的行内容器。用来包装文字的一部分，以便给它单独加样式。
它是文字的便利贴。