div 本身不具布局能力，仅是语义化“一块内容”的容器；其布局效果完全依赖 css 的 display、flex、grid 等规则。
div 是块级容器，不是布局工具
直接说结论：div 本身不带任何布局能力，它只是语义上“一块内容”的占位符。你用它堆出三栏、居中、响应式，靠的全是 display、Float、flex 或 grid 这些 CSS 规则，不是 div 自己会排版。
常见错误现象：
— 写了 5 个 div，没加任何 CSS，页面垂直堆成一柱子
— 给 div 加了 width: 300px 却发现宽度没生效（忘了设 display: block 或父容器限制）
— 用 div 套 div 十层，调试时找不到哪个盒子在撑开空白
- 使用场景：需要包裹一段无特定语义的内容（比如广告位、临时弹窗容器、js 动态插入区域）
- 别用它替代语义化标签：导航用
nav，文章用article，侧边栏用aside—— 浏览器和读屏软件不认div的含义 - 性能影响极小，但嵌套过深会让 CSS 选择器变慢、dom 树臃肿，尤其在移动端 JS 操作频繁时明显
flex 布局里 div 怎么写才不翻车
现在绝大多数「用 div 做布局」实际是给 div 加 display: flex。关键不在 div，而在父容器是否设了 display，以及子元素是否被正确设置为 flex 项目。
常见错误现象：
— 父 div 加了 display: flex，子 div 却还换行（忘了子项默认 flex: 0 1 auto，可能被内容撑宽）
— 用 justify-content: center 居中，但没生效（父容器没设宽度，或子项是 inline 元素）
— 在 flex 容器里混用 float，导致部分子项脱离 flex 流
立即学习“前端免费学习笔记（深入）”；
- 必须给父
div设display: flex或display: inline-flex，否则所有 flex 相关属性无效 - 子
div不需要额外声明，只要在 flex 容器内就是 flex 项目；但若子项是span等 inline 元素，得先设display: block或让它变成块级上下文 -
flex-wrap: wrap很容易被忽略 —— 默认不换行，内容超宽就溢出或压缩，而不是自动折行
div 和 grid 配合时最容易漏的两件事
用 div 做 grid 容器很常见，但两个基础点常被跳过：容器必须显式定义网格线，且子 div 要么靠 grid-area 显式定位，要么靠自动流排布 —— 它不会像表格那样“自动对齐”。
常见错误现象：
— 父 div 加了 display: grid，但没写 grid-template-columns，结果所有子 div 挤在第一列
— 子 div 设了 grid-column: 2 / 4，但父容器只有 3 列，导致错位或消失
— 在 grid 容器里又给子 div 加 float 或 position: absolute，直接脱离网格流
- 至少得写
grid-template-columns或grid-template-rows，哪怕只写1fr也比不写强 - 子
div的grid-column-start/grid-column-end值不能超过定义的列数，否则行为不可控 - 如果用
grid-area命名区域，父容器必须同步用grid-template-areas定义这些名字的位置
div 嵌套太深时怎么快速定位问题
当页面某个区域错位、留白异常、点击区域偏移，大概率是某层 div 的 margin/padding/border/box-sizing 混合叠加导致的，而不是最外层或最内层的问题。
排查建议：
— 打开浏览器开发者工具，选中目标区域，右键「Reveal in Elements panel」，看 DOM 树深度
— 逐层关闭父 div 的 margin 和 padding（在 Styles 面板里点掉勾），观察变化点
— 注意 box-sizing: border-box 是否统一，混合使用 content-box 会导致尺寸计算错乱
- chrome DevTools 的「Layout」侧边栏能直观显示每个
div的 margin/padding/border 和计算后的尺寸 - 用
* { outline: 1px solid red; }临时加描边，能一眼看出哪些div实际占了空间（注意不要提交到生产） - 如果用了 CSS-in-JS 或 scoped style，检查是否某层
div的 class 被意外复用，样式污染了其他位置
复杂点往往不在语法，而在多层嵌套后 margin 折叠、flex 与 grid 的嵌套优先级、或者某个祖先 div 的 transform 创建了新的层叠上下文，让 z-index 失效 —— 这些都得一层层剥开看，没法跳步。