div是块级容器而非布局工具，需配合css（如flex、grid）实现布局；应优先使用语义化标签，避免无意义嵌套与位置式class命名，必要时可用display: contents优化结构。
div 是块级容器，不是布局工具本身
很多人一上来就用 <div> 做“布局”，结果样式越写越乱、嵌套越来越深。根本原因是：div 本身不带任何语义和默认布局行为，它只是个空盒子。CSS 才决定怎么排——flex、grid、float、inline-block 都是后来加的，div 自己什么也不做。
<ul><li>不要指望写个 <code><div class="header"> 就自动居中或占满宽度，得靠 CSS 显式设置 <code>display、width、margin 等
display: flex 或 display: grid，而不是靠 div 堆结构再用 float 挤位置<nav></nav>、<main></main>、<section></section> 等语义化标签，比纯 <div> 更可靠
<h3>class 名别写成 “left-box-2” 这种临时标记
</h3>
<p>实际项目里最常踩的坑是 class 命名脱离上下文，比如 <code>left-box-2、div1、wrap。这类名字在调试时完全无法反推用途，协作时别人不敢动，重构时自己都懵。
- 命名要表达「它是什么」或「它干什么」，比如
product-card、sidebar-nav、error-banner - 避免纯位置/样式词：
red-text、float-left—— 一旦设计改了颜色或布局，这个 class 就名不副实 - 小范围组件内可用 BEM 风格，如
search-form__input，但别为了规范而嵌套过深
嵌套超过三层就该警惕结构问题
常见错误现象：<div><div><div><div>内容</div></div></div></div>。浏览器能渲染，但维护成本指数上升，CSS 选择器容易失控，React/Vue 里也难抽离逻辑。
- 检查是否可以用更少层级实现：比如用
display: contents让父 div 不参与布局，或直接把子元素提一级 - 如果必须多层（如卡片+阴影+内边距+内容区），用语义化组合代替无意义 div，例如
<article><header><h2>...</h2></header><p>...</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/10774" title="仿虎嗅网在线视频教育门户源码2.0"><img src="https://img.php.cn/upload/webcode/000/000/016/176368680836952.png" alt="仿虎嗅网在线视频教育门户源码2.0" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/10774" title="仿虎嗅网在线视频教育门户源码2.0">仿虎嗅网在线视频教育门户源码2.0</a> <p>仿虎嗅商学院在线视频教育门户网站源码，织梦内核，页面简洁，容易维护修改；适合做在线教育类网站，网站模板修改简单，网站设置多个广告位方便放置广告。适用于视频网站，在线教育、在线商学院；图片展示效果极佳;网站手工div+css，代码精简，首页排版整洁大方、布局合理、利于SEO、图文并茂、静态HTML；首页和全局重新做了全面优化，方便大家无缝使用。</p> </div> <a href="/xiazai/code/10774" title="仿虎嗅网在线视频教育门户源码2.0" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></article> - Vue/React 中尤其注意：别为了加 class 把一个
<div> 包三层，组件内部用 <code><template></template>或 Fragment（>）更干净display: contents 是隐藏 div 的实用替代
有时候你只想加个 class 控制样式，又不想它影响盒模型——比如不让外层
<div> 占高度、不打断 flex 流。这时候 <code>display: contents比删掉 div 更安全，因为它保留 DOM 结构，不影响 JS 查询或 Vue 响应式绑定。- 支持情况：Chrome 65+、Firefox 63+、Safari 15.4+，IE 完全不支持，如需兼容 IE 就别用
- 它会让元素“消失”于渲染树，但子元素照常显示，且仍属于父容器的 flex/grid 子项
- 示例：
<div style="display: contents"><span>文本</span></div>→<span></span>直接成为上层容器的子节点
不是所有布局都需要 div，也不是所有 div 都需要 class；真正卡住人的，往往不是语法不会写，而是没想清楚这个盒子到底该不该存在。
