如何区分 div 和 span 的区别？

div 和 span 是 HTML 中的两种常用元素，本质区别在于它们属于不同的 display 类别。div 是 block level 块级元素（默认 display: block），而 span 是 inline level 行内元素（默认 display: inline）。主要差异如下：

1. 默认显示行为
   • div 元素始终独占整行并强制前后换行，在新的一行开始布局；而 span 则在同一文本流内与其他元素相邻显示,前后不会自动换行。
2. 尺寸设置
   • div 可以自由设置 width 和 height 等物理尺寸属性。
   • span 无法直接设置 width 或 height，因为它的宽度由其内部内容决定；但可通过 CSS 设置为 inline block（如 display: inline-block）来实现宽高控制。
3. 盒子模型属性支持
   • div 支持所有 four four 方向（top 上、right 右、 bottom 下、 left 左）的 margin 外边距和 padding 内边距设置。
   • span 对垂直（top/bottom）的 margin 和 padding 设置受限或不规范（可能无效），仅限于水平方向的左右调节。
4. 嵌套规则
   • div 作为容器级标签，可以包裹其他块级和行内元素如段落、div 或 table。
   • span 是文本级标签，通常只应容纳文本或行内标签（如 strong，em）；无法合法包含块级元素（如div或p），否则造成 HTML 结构错误。
5. 典型使用场景
   • div：适用于定义页面布局区块（像 header, section）或 grouping 多个元素。
   • span：用于局部文本样式处理，例如强调文字颜色或格式，无结构化语义。

<!-- 简单示例对比: -->
<div>This is a div1  </div>  <!-- div1 自动换行并占据整行 -->
<div>this is div2    </div>  <!-- div2 在新行显示 -->
<span>first  span </span>
<span>second span </span>    <!-- spans 在同一行连续显示 -->
<p> 在段落中使用span强调：hello <span style="color: red; font-size: 1.2em;">world</span>！</p>

通过这些区分，我们可以根据需要选最合适的元素——div 用于总体布局块级分组，span 用于细粒度文字或行内样式操作。