直接删除无语义的冗余<div>，改用display: flex让子元素直接受控——这是最高效、无副作用的减层级方式；它避免inline-block的空白节点问题，消除补救性wrapper，提升渲染与查询性能。
直接删掉那些没语义、没样式、只为了“让布局生效”而加的 <div>，用 display: flex 让子元素直接受控——这是最高效、最无副作用的减层级方式。
用 display: flex 替代 inline-block 布局时，为什么能砍掉一层 <div>
传统 inline-block 方案常为控制列表项对齐，额外套一层 <div class="list-wrapper">；而 Flex 容器（如 <ul>）本身就能做主轴排列和对齐，无需 wrapper。
-
inline-block会把 HTML 换行/空格解析为实际空白节点，迫使开发者加 wrapper 来包裹并设font-size: 0或负 margin —— 这层 wrapper 纯属补救，毫无语义 -
display: flex在容器上启用后，子元素（如<li>）自动忽略源码空白，justify-content和gap可直接控制间距与对齐 - 常见错误：给
<li>自己设display: inline-block，再在外层<ul>加display: flex—— 这会导致双重布局逻辑冲突，浏览器可能降级回 inline-block 行为
当父容器已是 display: flex，子元素还套 <div> 就等于自建性能陷阱
比如卡片列表中，每个 <article> 内部又包一层 <div class="card-body">，只为让标题和描述用 flex 排列——这完全多余。
- 直接在
<article>上设display: flex; flex-direction: column，子元素<h3>和<p>就是 Flex 项目，无需中间层 - 多一层嵌套，DOM 树就深一级，JS 查询（如
el.querySelector('.desc')）路径更长，CSS 选择器匹配成本更高（从右往左回溯时多查一次父级） - 若该中间
<div>既无 class、id，也无内联样式，它就是纯冗余节点，删掉不影响渲染，且 Chrome DevTools 的 Layers 面板会显示更少的合成层碎片
display: contents 是最后的兜底方案，但别滥用
当你无法改 HTML 结构（比如第三方组件输出固定 DOM），又想让子元素“穿透”无意义父节点参与外层 Flex 布局时，display: contents 是唯一合法解法。
立即学习“前端免费学习笔记（深入）”；
- 它让父元素从渲染树中消失，子元素直接受其父容器的 Flex/Grid 控制，视觉效果等同于删掉该层
- 不支持 IE，Safari 15.4+ 才开始稳定支持；且该元素上的所有盒模型属性（
padding、border、background）全部失效 - 别对有交互行为的父元素用它（比如绑了
click事件或tabindex），否则事件委托链断裂，键盘焦点可能丢失
真正难的不是怎么写 Flex，而是敢不敢删掉那层写着 <div class="wrapper"> 却什么都没干的标签——它不报错，但每次重排都多走一遍祖先链，每次 JS 查询都多一次 DOM 遍历，每次屏幕阅读器导航都多跳一帧。删之前先看一眼 DevTools 的 Elements 面板：有没有连续三层 <div> 套着，连 class 都没写？那基本可以安全删了。
