知识库
CSS Grid 命名区域实战：让页面布局在移动端与桌面端复用同一套模板
为什么用命名区域 写响应式布局时，常见做法是用 Flexbox 配合 order 属性在断点处重排元素顺序。元素一多，order 数字会变得难以维护，也看不出布局意图。 CSS Grid 的 grid template areas 允许你用…
CSS 层叠上下文：为什么 z-index 设到 9999 还是压不住那个弹窗
问题现象 在开发中，我们可能遇到这样的情况：弹窗的 z index 已经设为 9999，却依然被页面上的某些元素遮挡。这通常是因为 层叠上下文 在作祟。 什么是层叠上下文？ 层叠上下文（Stacking Context）是 HTML 元素在…
CSS 容器查询实战：让同一个卡片组件在不同容器宽度下自动换布局
为什么需要容器查询 媒体查询（@media）关注的是 视口宽度 ，而组件复用时真正决定布局的往往是 它自己被放进多大的容器里 。同一个卡片组件，放在侧边栏（约 280px）和主内容区（约 700px）里，理想布局完全不同。容器查询（Cont…
浏览器事件循环与任务队列：为什么 setTimeout 不按时执行
从一次“延迟失效”说起 很多前端开发者都遇到过：明明写了 setTimeout(fn, 0)，fn 却迟迟不执行；或者 setTimeout(fn, 100) 实际延迟远超 100ms。这不是浏览器“不守时”，而是事件循环（Event Lo…
浏览器的渲染流水线：从 HTML 解析到合成层，一次重排到底发生了什么
引言 当我们在浏览器中输入网址，到页面呈现出来，背后经历了一系列复杂的步骤。了解这些步骤，尤其是“重排”和“重绘”的触发机制，是优化 Web 性能的关键。本文将带你走一遍浏览器的渲染流水线，并解释一次重排到底发生了什么。 渲染流水线的主要阶…
改了开发代理配置却不生效，因为它在构建时只读一次
前端调后端接口 404 或超时，你想起来要配开发服务器代理。改完配置文件，保存，等热更新——然后发现还是 404。 现象 前端请求后端接口报 404 或者超时。打开项目配置，代理其实已经配好了，格式看起来也对，但请求还是打不到后端。 于是你…
图片被浏览器拦截报 ERR_BLOCKED_BY_ORB，真相是拿到的根本不是图片
前端 <img 标签加载对象存储里的私有图片，控制台报了一个看不懂的 ERR BLOCKED BY ORB。你第一反应是 CORS 问题，开始配跨域——方向错了，而且怎么配都不会好。 现象 前端图片标签加载对象存储私有桶里的图片时，控制台报…
环形图在浏览器里好好的，一到小程序和 App 就是整块空白
你在 H5 上开发调试，图表渲染完美、主题切换丝滑。打包发到微信小程序和 App 上一看，图表区域整块白，主题切换点了没反应。 现象 一个环形图组件在 H5 端显示完全正常，在微信小程序和原生 App 上整块空白，什么都没有。同时，主题切换…
接口明明返回了 34 条数据，页面却整页空白：一个类型判断引发的惨案
你打开一个列表页，接口调试工具里数据显示正常，一条不少——34 条。但页面上什么都没有，白得让人怀疑人生。刷新、清缓存、换浏览器，全都没用。 现象 某个动态广场页面整页空白。打开浏览器开发者工具的网络面板，对应的接口返回了 34 条数据，结…
CSS Grid 与 Flexbox 该怎么选：常见布局场景的对照与取舍
引言 CSS Grid 和 Flexbox 都是现代 CSS 布局的核心工具，但很多开发者不清楚在具体场景中该用哪一个。本文通过常见布局场景的对照，帮你快速做出选择。 核心区别：一维 vs 二维 Flexbox 是一维布局模型，一次主要处理…
前端为什么需要构建工具？
前端为什么需要构建工具？ 如果你刚开始学习前端，可能会疑惑：我直接写 HTML、CSS、JavaScript，用浏览器打开就能运行，为什么还要学 Webpack、Vite 这些构建工具？ 简单来说， 现代前端开发已经不再是写几个静态页面那么…