div默认垂直堆叠因其是块级元素（display: block），天然独占一行；要横排需将父容器设为display: flex，子div自动成为flex项目水平排列，必要时添加flex-wrap: wrap实现折行。
div 不是布局工具，它只是块级容器；所有布局效果都来自 CSS —— 你写再多 div，不配 display: flex 或 display: grid，它就只会垂直堆成一柱子。
为什么 div 默认垂直堆叠，怎么让它横排
因为 div 是块级元素，默认 display: block，天然独占一行。想横排，不能靠删换行符或塞 float（已过时且易失控），得用现代方案：
- 父容器加
display: flex，子div自动成为 flex 项目，横向排列 - 若需折行，必须显式加
flex-wrap: wrap—— 默认nowrap，内容超宽只会压缩或溢出 - 别在 flex 容器里混用
float或position: absolute，子项会直接脱离 flex 流，行为不可预测 - 子项是
span等 inline 元素？先设display: block或display: inline-block，否则不参与 flex 排布
grid 布局中 div 容器最容易漏的两行 CSS
只写 display: grid 不够，div 不会自动变成“表格”——它连列数都不知道：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须定义至少一个维度：比如
grid-template-columns: 1fr 2fr或grid-template-rows: auto 1fr，哪怕只写1fr也比不写强 - 子
div的grid-column或grid-row值不能超出定义的轨道数，例如只有 3 列却写grid-column: 2 / 5，右侧会空白或错位 - 子项加了
float、position: absolute或display: contents？它就不再是 grid item，网格定位失效
div 嵌套太深时，CSS 选择器和 JS 操作为什么会变慢
DOM 节点本身开销小，但深层嵌套放大了两个实际问题：
- CSS 选择器如
#app div div div .content需逐层匹配，浏览器回溯成本线性上升，尤其在移动端重绘频繁时明显卡顿 - JS 用
querySelectorAll或遍历parentNode查找目标时，路径越长，执行时间越不可控 - 语义缺失：全用
div套娃，nav、main、aside这些标签浏览器能识别，读屏软件能朗读，div一律当“未知区域”跳过 - 不是禁止嵌套，而是建议：单个容器层级控制在 3–4 层内；用语义化标签替代无意义的
div包裹
真正难的不是写多少 div，而是每次敲下 <div> 之前，得问一句：这个容器有独立语义吗？它的布局责任该由谁承担？——答案几乎从来不是 <code>div 自己。
