div是块级元素，默认display: block，独占一行且可设宽高；span是行内元素，默认display: inline，不换行且宽度由内容决定，不可直接设宽高。
div 和 span 的根本区别不是“哪个更好用”，而是“谁该在什么位置干啥事”——错用会导致布局错乱、样式失效、甚至影响可访问性。
为什么div一放就换行，而span贴着文字跑？
因为浏览器默认给 div 设了 display: block，给 span 设了 display: inline。这不是“bug”，是 CSS 规范定义的行为。
-
div独占一行：哪怕里面只写一个空格，前后也会强制换行；它能撑满父容器宽度（除非设了width） -
span只包住内容：宽度由内部文本或子元素决定，不能直接设width或height（除非先改成display: inline-block或block） - 常见错误：
<span><div>内容</div></span>—— 这是非法嵌套，HTML 解析器会自动修正，可能导致结构意外断裂
div 能装啥，span 又不能装啥？
HTML 标准对二者的内容模型有硬性限制，不是“写了不报错”就等于“能用”。
-
div可以包含：任意块级元素（如h1、p、ul）、行内元素（如span、a）、甚至另一个div -
span只能包含：纯文本、其他行内元素（如em、strong、a），不能直接放p、div、ul等块级标签 - 实际踩坑：
<span><p>段落</p></span>看似渲染正常，但 DOM 结构会被浏览器重排成<p><span>段落</span></p>，JS 操作时可能拿不到预期的父节点
什么时候必须用 div，什么时候非得选 span？
关键看你要包裹的是“一块区域”还是“一段文字”，而不是“习惯用哪个”。
立即学习“前端免费学习笔记（深入）”；
- 用
div：需要控制宽高/内外边距/定位（如position: absolute）、要浮动、要 flex 布局的容器、要语义化分组但没合适语义标签时（比如侧边栏、卡片） - 用
span：只想给一句话里的某个词加颜色、加下划线、绑定点击事件（如高亮搜索关键词、可编辑文本片段） - 性能提示：大量无意义的
div嵌套（尤其是为了 hack 样式）会拖慢渲染和 JS 查询速度；span虽轻量，但滥用（比如每个字都套一个span）也会增加 DOM 节点数
想改默认行为？别硬扛，用 CSS 显式覆盖
不要靠“猜浏览器怎么解析”，该改就改，但得清楚后果。
- 让
span支持宽高：span { display: inline-block; width: 100px; }—— 它会像按钮一样占据空间，但仍保持行内流特性 - 让
div不换行：div { display: inline; }—— 它会失去块级特性，无法设margin-top/bottom（只有margin-left/right生效） - 最稳妥的替代方案：优先用语义化标签（
header、article、time），它们默认显示行为可预测，且对屏幕阅读器友好
真正容易被忽略的，不是“怎么让 span 变宽”，而是忘记检查它的父容器是否设置了 white-space: nowrap 或 font-size: 0 —— 这些 CSS 会彻底改变 span 的表现，而且很难一眼发现。
