div默认不撑宽、不居中、不自动布局，其宽度取决于父容器和自身width设置，高度默认为0；常见错误包括width失效、margin:0 auto不居中、flex布局漏设flex-wrap或父容器高度等。
div 默认不撑开、不居中、不自动布局
直接写 <div>内容</div>，浏览器渲染出来很可能就裹着文字那么宽，上下堆叠——不是 bug，是它本来就这样。div 是 display: block，但块级元素的宽度只取决于父容器和自身 width 设置，不是“默认 100%”。高度更是默认为 0（没内容、没 padding、没 border、没 height 时）。
常见错误现象：
- 写了 5 个
<div>，没加任何 CSS，页面垂直堆成一柱子 - 设了
width: 300px却没生效（忘了父容器是width: auto或未设宽） - 加了
margin: 0 auto但不居中（没设固定width，或父容器是inline级）
想让它水平占满：必须加 width: 100%，且父容器要有明确宽度（html 和 body 也要检查）；想垂直撑高：得设 height: 100%，同时确保所有父级（包括 html、body）都有明确高度；想水平居中：要么固定宽 + margin: 0 auto，要么用 display: flex + justify-content: center。
flex 布局里 div 最常漏写的三件事
现在所谓“div 布局”，90% 实际是给 <div> 加 display: flex。但光加这一句远远不够，下面三点漏一个，布局就失灵：
立即学习“前端免费学习笔记（深入）”；
- 忘了设
flex-wrap: wrap：默认nowrap，子项超宽直接溢出或压缩，不会自动折行 - 子项用了
float或display: inline：会脱离 flex 流，justify-content和align-items对它完全无效 - 父容器没设高度，却指望
align-items: center垂直居中：如果父<div>高度是auto，那它根本没“垂直空间”可居中
另外注意：flex 容器里的子 <div> 不需要额外声明 display，但如果是 <span> 这类 inline 元素，得先设 display: block 才能参与 flex 排列。
grid 布局中 div 必须显式定义骨架
<div> 加了 display: grid 后，它才真正成为网格容器；否则所有 grid-template-* 属性全无效。常见错误是只写了 grid-template-columns: 1fr 1fr 却忘了加 display: grid，结果子元素还在文档流里堆叠。
关键实操点：
- 至少得写
grid-template-columns或grid-template-rows，哪怕只写1fr也比不写强 - 子
<div>默认按顺序填入单元格，不需要每个都设grid-column—— 除非你要打破顺序 -
grid-column: span 2让某个子项跨两列，这个声明写在子元素自己的 CSS 里，不是父容器上 - 别在 grid 容器里混用
float或position: absolute，它们会直接脱离网格流
fr 单位按剩余空间分配，但受 min-content 限制；列数写多但内容少？用 repeat(auto-fit, minmax(250px, 1fr))) 自动适配容器宽度。
什么时候该换掉 div，而不是硬套 class
语义错误比样式错更难调试——读屏软件读不出 <div class="nav"> 是导航，SEO 也认不出这是导航区块。优先用语义化标签替代：
- 用
<nav>替代<div class="navigation"> - 用
<main>替代<div id="content"> - 用
<section>或<article>替代<div class="post">
只在真没语义时才用 <div>：比如轮播图外层包裹、动画过渡层、JS 动态插入的临时容器。嵌套超过三层 <div> 就该停下来想一想——<div><div><div><div> 看似无害，实际埋了三颗雷：CSS 选择器容易失控、React/Vue 里组件拆分困难、移动端 DOM 深度大易卡顿。这时候考虑 display: contents（让父 <div> 不产生盒模型）、BEM 命名收敛作用域，或直接抽成自定义组件。
