div 是无语义的块级容器，不自带样式与语义，仅适用于布局控制、js挂载点等必要场景；语义化优先，避免过度嵌套，class用于样式复用，id仅限唯一js定位。
div 是什么，不是什么
它只是个无语义的容器，浏览器默认不给任何样式，也不代表标题、段落或按钮。别把它当 <p></p> 用，也别指望它自动换行或加边距——那些全是 CSS 控制的。
常见错误现象：div 套 div 十层深，结果调试时找不到哪个 div 在撑开高度；或者把 div 当按钮写 onclick，却忘了加 role="button" 和键盘支持。
- 语义化优先：能用
<header></header>、<nav></nav>、<article></article>就别硬塞div - 需要布局控制（比如 flex/Grid 容器）时，
div才是合理选择 - 纯 JS 动态插入内容的挂载点，如
document.getElementById("app")对应的<div id="app"></div>，这是安全用法
div 的 class 和 id 怎么选
关键不在“能不能用”，而在“要不要暴露”。id 全局唯一，JS 操作方便，但 CSS 中权重太高，改起来容易连锁反应；class 可复用、可组合，更适合样式和 BEM 类命名。
使用场景：你写一个弹窗组件，内部结构用 class（如 modal__overlay、modal__content），而整个弹窗挂载点用 id="user-modal" 供 JS 快速定位。
立即学习“前端免费学习笔记（深入）”；
- 一个页面只用一次的顶层容器，用
id（如<div id="root">） <li>所有可复用、需样式复用、可能被 JS 多次查询的元素，用 <code>class - 避免用
id写 CSS，除非明确要靠高权重覆盖（极少见） -
class名别用下划线开头（如class="_hidden"），某些 CSS-in-JS 库会误判为私有 - 检查是否在模板里写了类似
<div><div><div><p>文字</p></div></div></div>—— 直接删掉中间两层 - 用浏览器的“Elements”面板右键 → “Edit as html”，临时删
div看内容是否错位，确认它是否真有必要 - CSS 中用
:has()或>子选择器替代深度后代选择器（如.card div p改成.card > .content > p） - 要设
width/height/margin（尤其是上下边距）、要浮动、要 Flex 子项 → 用div - 只改颜色、字体、加下划线、响应点击但不改变布局位置 → 用
span - 不确定时，打开 DevTools，看元素盒模型：如果“Layout”里显示
display: inline且没有宽度，那就是span的天然领地
div 嵌套过深导致渲染慢怎么办
不是 div 本身慢，而是深层嵌套让 CSS 选择器匹配变重、dom 树过大、DevTools 难以定位。chrome 的“Layers”面板里能看到意外的合成层爆炸，往往就始于一堆没意义的 div 包裹。
性能影响：每多一层 div，浏览器就要多做一次布局计算；SSR 渲染时字符串拼接也更长；React/Vue 等框架的 diff 也会多比几轮。
div 和 span 在实际项目里怎么分
区别就一条：div 是块级容器，默认独占一行；span 是内联容器，默认不换行、不撑宽高。但这不是“该用哪个”的全部依据——关键是它包裹的内容是否需要参与块级布局流。
容易踩的坑：把按钮文字包在 span 里再加 display: block，不如直接用 div；或者把整段带样式的提示文本塞进 div，结果被父容器的 text-align 意外居中，其实它本该是内联行为。
事情说清了就结束。真正麻烦的从来不是 div 怎么写，而是它背后那一层层没人 review 的嵌套逻辑和凭感觉写的 CSS 选择器。