div 不是布局万能胶，需配合 CSS 才生效；默认不撑满、不居中；语义中性，应优先用 HTML5 语义标签；Flex 布局中需注意 flex-wrap、align-items 和 flex-direction；display 切换影响文档流。
div 不是布局的“万能胶”，它本身不带语义、不控制样式、也不影响流式行为——你得手动给它 class、style 或配合 CSS 定位/浮动/Flex/Grid 才能真正起作用。
div 为什么不能直接撑满屏幕或居中？
因为 div 默认是块级元素，但它的宽度只包裹内容（除非父容器有明确宽度），高度完全由子内容撑开。没有 CSS 干预时，它不会自动占满父容器、也不会居中对齐。
- 想让它填满父容器：必须显式设置
width: 100%和/或height: 100%，且父元素不能是height: auto - 想水平居中：用
margin: 0 auto（需有固定宽度）或display: flex; justify-content: center - 想垂直居中：单靠
div自身做不到，必须依赖父容器的flex、grid或position: absolute + transform
什么时候该用 div，什么时候不该用？
div 是语义中性容器，适合“纯视觉分组”；但现代 HTML5 提供了更准确的语义标签，滥用 div 会降低可访问性和 SEO 友好度。
- 应该用
div：封装一组无特定语义的 UI 模块（比如轮播图的外层容器、卡片阴影层、动画包裹层） - 不该用
div：当内容天然属于导航（用nav）、页脚（用footer）、文章段落（用article或section）、标题区块（用header）时 - 特别注意：嵌套太多
div（如<div><div><div>...）往往是 CSS 结构没理清的表现，优先考虑语义标签 + 合理类名
div 在 Flex 布局里最常踩的坑
把 div 设为 display: flex 很方便，但默认行为容易误判：
立即学习“前端免费学习笔记（深入）”；
- 子元素默认不换行：
flex-wrap: nowrap—— 内容超宽会被裁剪或溢出，加flex-wrap: wrap才能折行 - 子项默认不拉伸：
align-items: stretch会让子项高度拉满容器，但若子项本身设了height或min-height，就会失效 - 主轴方向默认是
row，不是column—— 想竖排必须显式写flex-direction: column - 别忘了：
div作为 flex 容器时，其自身仍受父容器约束；如果父容器没给高度，align-items: center垂直居中可能看起来“没反应”
div 的 display 属性切换会影响文档流吗？
会，而且影响方式完全不同：
-
display: block（默认）：独占一行，宽度默认填满父容器 -
display: inline：和其他内联元素同行显示，忽略width/height、margin-top/margin-bottom -
display: inline-block：保留内联流位置，但支持宽高和上下 margin —— 常用于按钮组、图标文字混排 -
display: none：彻底从渲染树移除，不占空间、不可见、不触发重排（但会触发重绘） -
visibility: hidden不是display属性，但它让元素“隐形却占位”，和display: none行为差异极大，别混用
真正难的不是怎么写 div，而是判断它是否该存在——每次写之前，先问一句：这个容器有没有必要？能不能用语义化标签替代？CSS 能不能直接作用在更具体的元素上？
