<div> 默认是块级元素，但无默认边距、内边距和边框，视觉上“隐形”；其布局效果完全依赖CSS规则，如未设宽高、背景或清除浮动，便无法呈现分块效果。
div 标签本身不定义布局，只定义逻辑区块；它是否“起作用”，完全取决于你有没有配对的 CSS 规则。
为什么写了 <div> 却看不到分块效果
常见错误现象：页面里写了 5 个 <div>，没加任何 CSS，结果所有内容垂直堆成一柱子，连边框都看不见。
-
<div>默认是块级元素，但默认margin、padding、border全为 0，视觉上等于“隐形” - 没设
width或background-color，就看不出它占了多大空间 - 父容器没设高度或溢出控制（如
overflow: hidden），内部浮动子元素可能塌陷，导致<div>高度为 0 - 用
float布局时忘了清除浮动（clear: both或伪元素::after），后续<div>会错位
什么时候该用 <div>，而不是 <section> 或 <article>
语义优先：浏览器、SEO、读屏软件靠标签含义理解结构，不是靠 class 名。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
<div>：纯样式/交互容器，比如弹窗遮罩层<div id="modal-overlay">、JS 动态插入区域、广告位占位符 - 用
<section>：有独立主题的内容块，且自带标题（必须含<h1>–<h6>），如“用户评论区”“产品参数表” - 用
<article>：能独立分发、复用的内容，比如博客正文、新闻卡片、论坛帖子 - 别用
<div class="header">替代<header>，后者自带语义和默认 display 行为
<div> 在 flex / grid 布局中为什么“不听使唤”
关键不在 <div> 本身，而在它的 display 上下文是否被正确激活。
- 父
<div>加了display: flex，但子<div>是<span>或内联元素？得先设display: block或让其成为块级上下文 - 子
<div>设了width: 200px却撑不开？检查父容器是否限制了max-width或用了flex-shrink: 1（默认行为） - 用
grid时只写display: grid，没写grid-template-columns？所有子项会挤在第一列，视觉上像没生效 - 给子
<div>加float: left同时又在flex容器里？它会脱离 flex 流，位置不可控
嵌套太深的 <div> 会带来什么实际问题
不是语法错误，但会在真实项目中拖慢开发和运行效率。
- CSS 选择器层级过深（如
.wrapper .content .main .item .title）导致重绘变慢，尤其在移动端 JS 频繁操作 DOM 时 - 调试时难以定位哪个
<div>在撑开空白——DOM 树臃肿，Chrome DevTools 里一眼扫不完 - 用 JS 查询
document.querySelector('.container > div > div > div')比查document.querySelector('article')更脆弱，class 名一改就断 - 过度依赖
<div>嵌套掩盖了语义缺失问题，后期接入无障碍（a11y）或 SSR 渲染时容易暴露结构缺陷
真正难的不是写多少个 <div>，而是判断哪一层该收口、哪个容器其实该换成 <nav> 或 <aside>——语义一旦写错，后面所有样式和 JS 都得跟着妥协。
