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