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> 时，能否立刻回答：这里有没有更合适的语义标签？如果没有，这个 <code>div 是否会被 JS 或 CSS 真正用到？否则它就只是页面里一块沉默的、不可访问的空白。