span不能直接设width或margin-top，因其默认为display:inline行内元素，忽略块级盒模型属性；需改用inline-block或inline-flex才能生效。
span 标签本身不改变布局、不携带语义、不自带样式——它只是个“钩子”，专为 CSS 和 JavaScript 操作文本片段而生。
为什么 span 不能直接设 width 或 margin-top
因为它是默认 display: inline 的行内元素，这类元素天生忽略块级盒模型属性。强行写上也不会生效，浏览器会静默忽略。
- 能用的样式：
color、font-size、background-color、text-decoration等纯行内属性 - 想用
width/height/margin？必须显式改显示模式：display: inline-block或display: inline-flex - 注意
inline-block会保留换行符/空格产生的间隙，实际宽度可能比预设多出几个像素
什么时候该用 span 而不是 div 或其他语义标签
核心判断标准就一条：是否需要在**不打断当前行流**的前提下，给一段文本加样式或绑定行为。
- ✅ 正确场景：高亮搜索关键词、给价格数字加红色、动态更新倒计时数字、为某词添加
title提示 - ❌ 错误场景：包裹整段说明文字（该用
p）、做按钮容器（该用button或带role="button"的div）、构建导航栏（该用nav+ul） - ⚠️ 避免滥用：如果只是为了“套个 class 好写 CSS”，但没实际样式或脚本需求，
span就是冗余 DOM 节点
span 的可访问性与语义陷阱
它没有语义，所以屏幕阅读器不会特殊处理；但正因如此，你得主动补足上下文，否则对辅助技术用户就是“看不见的噪音”。
- 若仅用于视觉装饰（如图标字体），加
aria-hidden="true" - 若承载关键信息（如错误提示），别只靠颜色区分，配合
aria-live或role="alert" - 不要用
span替代strong、em、time等有明确语义的标签——样式可以复写，语义无法伪造
嵌套 span 和性能影响
DOM 层级过深本身不卡顿，但大量无意义的 span 嵌套会让调试和维护变困难，尤其当 CSS 选择器依赖深层结构时。
- 单层
span是常态，两层以内基本安全 - 三层及以上嵌套需警惕：是不是该抽成组件？或者用伪元素
::before/::after替代部分装饰？ - 服务端渲染或静态站点中，每个多余
span都增加 HTML 体积，对首屏解析有微小但可测的影响
真正难的不是怎么写 span，而是每次敲下 时，能不能立刻回答：这个钩子背后有没有真实样式逻辑？有没有 JS 交互意图？有没有无障碍补救措施？没有答案，就先别写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
