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，页面垂直堆成一柱子 <li>设了 <code>width: 300px却没生效（忘了父容器是width: auto或未设宽） - 加了
margin: 0 auto但不居中（没设固定width，或父容器是inline级） - 忘了设
flex-wrap: wrap：默认nowrap，子项超宽直接溢出或压缩，不会自动折行 - 子项用了
float或display: inline：会脱离 flex 流，justify-content和align-items对它完全无效 - 父容器没设高度，却指望
align-items: center垂直居中：如果父<div> 高度是 <code>auto，那它根本没“垂直空间”可居中另外注意：
flex容器里的子<div> 不需要额外声明 <code>display，但如果是<span></span>这类 inline 元素，得先设display: block才能参与 flex 排列。grid 布局中 div 必须显式定义骨架
<div> 加了 <code>display: grid后，它才真正成为网格容器；否则所有grid-template-*属性全无效。常见错误是只写了grid-template-columns: 1fr 1fr却忘了加display: grid，结果子元素还在文档流里堆叠。关键实操点：
- 至少得写
grid-template-columns或grid-template-rows，哪怕只写1fr也比不写强 - 子
<div> 默认按顺序填入单元格，不需要每个都设 <code>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 也认不出这是导航区块。优先用语义化标签替代： <ul><li>用 <code><nav></nav>替代<div class="navigation"> <li>用 <code><main></main>替代<div id="content"> <li>用 <code><section></section>或<article></article>替代<div class="post"> <p>只在真没语义时才用 <code><div>：比如轮播图外层包裹、动画过渡层、JS 动态插入的临时容器。嵌套超过三层 <code><div> 就该停下来想一想——<code><div><div><div><div> 看似无害，实际埋了三颗雷：CSS 选择器容易失控、React/Vue 里组件拆分困难、移动端 DOM 深度大易卡顿。这时候考虑 <code>display: contents（让父<div> 不产生盒模型）、BEM 命名收敛作用域，或直接抽成自定义组件。</div> - 至少得写
想让它水平占满：必须加 width: 100%，且父容器要有明确宽度（html 和 body 也要检查）；想垂直撑高：得设 height: 100%，同时确保所有父级（包括 html、body）都有明确高度；想水平居中：要么固定宽 + margin: 0 auto，要么用 display: flex + justify-content: center。
flex 布局里 div 最常漏写的三件事
现在所谓“div 布局”，90% 实际是给 <div> 加 <code>display: flex。但光加这一句远远不够，下面三点漏一个，布局就失灵：
