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 友好度。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 应该用 div：封装一组无特定语义的 UI 模块（比如轮播图的外层容器、卡片阴影层、动画包裹层）
• 不该用 div：当内容天然属于导航（用 nav）、页脚（用 footer）、文章段落（用 article 或 section）、标题区块（用 header）时
• 特别注意：嵌套太多 div（如 <div><div><div>...）往往是 CSS 结构没理清的表现，优先考虑语义标签 + 合理类名 <h3>div 在 Flex 布局里最常踩的坑</h3> <p>把 <code>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 能不能直接作用在更具体的元素上？