div 是无语义的通用块级容器，仅在无更贴切语义标签时使用；它承担布局底座角色，支持 flex/grid/position 等 CSS 技术，但本身不定义结构或含义。
div 标签本身没有语义，不是“标题”“文章”“导航”，它就是一个纯粹的块级盒子——你得主动给它加 class 或 id，它才真正开始工作。
为什么不能直接用 div 替代 section、article？
搜索引擎、屏幕阅读器、代码审查工具都依赖语义标签理解结构。div 一视同仁：不管里面是新闻正文、用户评论还是广告位，它都当“普通盒子”处理。而 article 明确告诉浏览器“这是独立可分发的内容”，nav 表示“这是导航区域”。滥用 div 会导致：
- SEO 权重稀释，关键内容不易被识别
- 残障用户无法通过语义快速跳转到主内容区
- 团队协作时，光看 HTML 很难判断某块
div的真实用途
只有当没有更贴切的语义标签可用时（比如弹窗遮罩层、CSS 动画包裹器、JS 渲染挂载点），才该选 div。
div 在 CSS 布局中到底承担什么角色？
它是现代布局技术的“底座容器”——flexbox 和 grid 都必须作用在某个块级元素上，div 就是最常被选中的那个。但它本身不决定布局方式，只提供盒模型基础：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 默认
display: block，独占一行，可设width/height/margin - 要启用
display: flex，必须写在父级div上，子元素才能按 flex 规则排列 - 用
position: absolute时，它的父级div往往需要先设position: relative做定位上下文 - 不要试图靠嵌套多个
div模拟表格布局——现在有display: grid，更可控也更易维护
哪些场景下必须用 div，且不能用语义标签？
语义标签解决“它是什么”，div 解决“我要把它当容器来操作”。以下情况绕不开 div：
- React/Vue 等框架的根挂载点：
<div id="root"></div>—— 这里不需要语义，只需要一个稳定、无干扰的 DOM 节点 - CSS 动画或过渡的包裹层：
<div class="fade-enter-active">...</div>，语义标签可能自带默认样式或行为，干扰动画 - 需要
z-index控制叠层但又不属于导航/主内容等语义范畴的浮层（如 tooltip、loading 遮罩） - 表单中逻辑分组但无统一语义的字段集，比如地址输入区里的“省市区”三级联动，用
fieldset不够灵活，用div+aria-labelledby更实际
容易被忽略的兼容性与性能细节
div 虽简单，但组合不当会埋坑：
- 过度嵌套（比如
<div><div><div><p>文本</p></div></div></div>）会拖慢 DOM 查找和重排计算，尤其在移动端 - 大量空
div（仅用于撑开间距或背景色）应优先用::before/::after伪元素或padding替代 -
div默认不触发 BFC，遇到浮动塌陷或 margin 合并问题时，别急着加额外div清除浮动，改用overflow: hidden或display: flow-root更轻量 - 服务端渲染（SSR）场景下，
div是最安全的容器选择——语义标签在某些老版本 SSR 工具链中可能被错误解析或丢失属性
真正难的不是怎么用 div，而是每次敲下 <div 时，能否立刻回答：这里有没有更合适的语义标签？如果没有，这个 div 是否会被 JS 或 CSS 真正用到？否则它就只是页面里一块沉默的、不可访问的空白。
