div是块级元素，span是行内元素：div默认独占一行、支持完整盒模型属性；span默认不换行、只包裹内容宽度、垂直方向样式受限；语义上div用于结构布局，span用于文本局部样式化。
div 是块级元素，span 是行内元素
这是最根本的区别，直接决定它们在页面中怎么“站位”。div 默认独占一行，前后自动换行；span 默认不换行，只包裹内容宽度，多个 span 可以挤在同一行里。
常见错误现象：span 里塞了 img 或 button 后布局错乱，其实是它默认不承认块级子元素的换行行为（虽然浏览器会容错渲染，但语义和嵌套规范上不推荐）；反过来，把 div 塞进 span 会直接被 HTML 解析器忽略或修正——W3C 明确规定 span 只应包含内联内容。
-
div支持width、height、margin-top/bottom、padding-top/bottom等全部盒模型属性 -
span的width/height默认无效；margin-top/bottom和padding-top/bottom在多数场景下也不产生预期垂直间距（只影响行高或文本基线） - 想让
span表现得像块级元素？用display: block或display: inline-block更可靠，而不是硬设宽高
什么时候该用 div，什么时候该用 span
不是看“要不要加样式”，而是看“这个容器承载的是结构还是文本片段”。
使用场景：
- 用
div：页眉区域、卡片容器、模态框遮罩层、Flex/Grid 的父容器——这些都涉及空间划分与布局控制 - 用
span：给一句话里的某个词加红色、给价格数字加货币符号样式、为某段文字绑定点击事件——仅作用于文本流中的局部 - 如果目标是语义化，优先考虑
header、nav、article、time等 HTML5 标签，而不是无脑套div或span
display 属性能互相转换，但别忽略语义和嵌套限制
display: block 可以让 span 表现得像 div，display: inline 也能让 div 挤进一行——但这只是视觉欺骗，不改变 DOM 结构合法性。
关键约束：
-
span内不能合法包含div、p、h1等块级元素（即使加了display: inline） -
div可以嵌套任意元素，包括其他div和span，但过度嵌套会增加 CSS 选择器复杂度和可维护成本 - 用
display: inline-flex或display: inline-grid时，父元素必须是内联上下文，span是更自然的起点，div则需先改display
实际开发中最容易被忽略的一点
很多人写完样式发现 span 的上下 margin 没反应，第一反应是“CSS 写错了”，其实大概率是没意识到：行内元素的垂直 margin 不参与文档流布局，它不影响行框高度，也不推挤相邻元素。真正起作用的是 line-height、vertical-align，或者干脆换成 display: inline-block。
同理，div 默认撑满父容器宽度，但一旦设了 float 或 position: absolute，它就脱离文档流，后续兄弟元素可能“塌陷”上来——这不是 bug，是设计使然，但新手常因此误判布局逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
