CSS grid 与 flex 怎么选，本质是看维度：flex 管一维排列与对齐，grid 管二维行列网格，二者互补不互斥。本文给出一维与二维的判定标准，以及导航条卡片流选 flex、表单墙相册选 grid、大区用 grid 小区用 flex 嵌套三个场景，并指出追新、硬拼二维等常见误解，照着选就不必反复横跳。

给元素写很大的 z-index 却被盖住，最常见的原因不是数值小，而是两个元素不在同一个层叠上下文里比较。本文用弹层被卡片遮住的场景，讲清层叠上下文的形成条件、会新建它的属性（opacity、transform、filter 等）与对应修法。你会明白 z-index 比的是最近共同层叠上下文而非全局，优先用 isolation 或调整 DOM 顺序才是治本。

想用纯前端写个小游戏却不知从哪下手？其实只要三块：HTML 画布骨架、JavaScript 状态与输入、一个不断重画的游戏循环。本文用一个能双击运行的接住下落方块例子，把输入、状态、渲染三步拆开讲，每段都附可复制代码。跟着跑通就能拥有可无限扩展的游戏地基，再加音效、计分、多关卡都不会无从下手。

代码贴进 pre 后缩进乱、行号只能手打？问题出在 pre 与 code 的分工没理清。本文讲清 pre 负责原样保留空格换行、code 负责声明语义，并用 CSS 计数器（counter-reset、counter-increment、::before 的 content:counter）自动生成行号，点出长行挤歪行号列、JS 插行号导致复制带数字这两个常见坑。照着做，代码块既好看又好复制。

flex 子项明明写了 width 却被挤扁、调不回原宽，多半是 min-width 这个下限在作怪。本文讲清 flex-basis、width、min-width 与 flex-shrink 四者的优先级，给出 min-width:0 放开压缩下限、flex-shrink:0 禁止压缩、修嵌套与图片下限这三种解法，并点出“内容有天然最小宽度就永远缩不下来”这个最易漏的细节，照着改宽度就能听话。

uni-app 多端适配时该用 rpx 还是 rem，取决于项目是否只发 H5。本文讲清 rpx、px、rem 三套单位的换算基准与适用边界，给出 H5 上 rem 的插件配置与根字号写法，并列出单位混用、第三方组件被缩放、1px 边框丢失三类失败的排查动作。

样式写了却没反应，多数不是语法写错，而是被更高权重的规则盖掉了。本文用一个可复现页面讲清层叠的仲裁顺序：先确认规则有没有命中元素，再比选择器权重的三个档位，最后看样式表的加载顺序，并说明内联样式与 !important 的真实代价，附一份六步验证清单。

CSS 里没有画弧线的现成属性，弧线都是借出来的：借圆的边、借 SVG 路径、借裁切边界。本文给定一个 600×400 的最小场景，给出伪元素配 border-radius 与 SVG path 两种完整可运行写法，讲清各自的适用边界、缩放表现与三个高频失败分支，并附一份验证清单。

背景图要随窗口等比缩放，cover 与 contain 都是等比的，区别只在牺牲裁切还是留白。本文用一个全屏 hero 区讲清 background-size 五个取值的实际行为，给出 cover 配安全区与 aspect-ratio 等比容器两种工程做法，并说明窄屏换素材、留白配色等高频失败分支。

动画卡顿的根源多半是动错了属性。本文从样式、布局、绘制、合成四步渲染管线讲清为什么只有 transform 与 opacity 最便宜，用一个 20 项列表的 hover 场景给出改造前后的完整代码，并说明 will-change 的适用边界、三个高频失败分支与一份性能面板验证清单。