div是块级元素，独占一行用于布局；span是行内元素，不换行用于文本修饰。两者分别适用于结构划分与内容标记，核心差异在于布局方式、尺寸控制及嵌套规则。
div 和 span 是 html 中最常用的两个容器标签，但它们在页面布局和显示行为上有本质区别。理解它们的关键在于掌握块级元素与行内元素的特性。
div 是块级元素：独占一行，用于结构布局
div 全称是 division（分区），属于块级元素。它的主要特点是：
- 默认情况下独占一整行，宽度自动撑满父容器
- 可以设置 width、height、margin、padding 等盒模型属性
- 通常用于构建页面的整体结构，如头部、侧栏、内容区等
- 内部可以包含其他块级元素或行内元素
例如用 div 划分一个导航区域或文章卡片，便于通过 css 控制整体样式和定位。
span 是行内元素：不换行，用于文本片段包裹
span 没有特定语义，属于行内元素，主要用于标记文本中的一部分。其特性包括：
- 不会换行，与其他行内元素在同一行显示
- 宽度和高度由内容决定，不能直接设置宽高（除非改变 display 类型）
- 常用于对某段文字应用特殊样式，比如高亮关键词、改变字体颜色
- 只能包含文本或其他行内元素，不能嵌套块级元素
比如在一个段落中用 span 包裹“重要提示”四个字，单独设置红色字体。
块级与行内元素的核心差异总结
从渲染行为上看，两者的主要区别体现在以下几个方面：
立即学习“前端免费学习笔记（深入）”；
- 布局方式：块级元素垂直排列，行内元素水平排列
- 尺寸控制：块级可设宽高，行内元素受内容影响大
- 嵌套规则：块级可包含几乎所有元素，行内一般只含文本或行内标签
- 默认换行：div 自动换行，span 不会打断文本流
实际开发中，选择 div 还是 span 取决于你需要的是结构划分还是内容修饰。合理使用两者能提升代码可读性和样式控制效率。