你不知道的 CSS 之包含块
百分比宽高与绝对定位偏移到底相对谁算？搞懂 containing block 与初始包含块，布局阶段的几何信息才说得清。
#layout #containing-block #interview
阅读全文 Archive
全部文章
按分类筛选，或浏览最新发布的内容。每篇文章都支持代码展示与 Vue 实时预览。
CSS 属性计算过程：从声明到最终值
确定声明值、层叠冲突、继承与默认值——搞懂 Computed 面板里那一长串属性是怎么来的。
#cascade #computed-style #interview
阅读全文 reflow、repaint 与 transform 为何高效
回流与重绘分别对应布局树与绘制指令的重新计算，以及为何 transform 动画大多不拖累渲染主线程。
#browser #rendering #performance
阅读全文 浏览器是如何渲染页面的？
从 HTML 解析到 GPU 上屏，详解渲染主线程与合成线程分工，以及 DOM 树、布局树、图层与位图如何串联成流水线。
#browser #rendering #interview
阅读全文 浏览器事件循环：从进程模型到任务队列
梳理渲染主线程如何调度任务、异步为何必要、JS 为何会阻塞渲染，以及 Chrome 中延时/交互/微队列的优先级。
#browser #event-loop #interview
阅读全文 网页钢琴与 Web Audio 合成
用振荡器与 GainNode 包络合成钢琴音，支持键盘演奏、延音踏板与内置乐谱自动播放。
#web-audio #piano #synthesis
阅读全文 无限视差全屏滚动
禁用原生滚动，用 wheel 与 touch 驱动 prev/cur/next 三屏窗口，mask 高度动画与 rAF lerp 实现无限视差切屏。
#scroll #parallax #animation #touch
阅读全文 Canvas 递归绘制随机分形树
用 Canvas 递归分形画随机树，LCG 伪随机保证可复现，点击换一棵，并适配高清屏 DPR。
#canvas #recursion #generative-art
阅读全文 Web Audio 音乐可视化
用 Canvas 与 Web Audio API 实现圆形、柱状、波形、粒子四种频谱，并同步 LRC 歌词。
#web-audio #canvas #visualization #vue
阅读全文 CSS 边框两式：动画渐变条纹与 border-image
用双层 background 实现会动的条纹边框，或用 border-image 切片装饰图做自适应边框。
#border #animation #border-image
阅读全文 纯 CSS 响应式文字切换
不依赖 JavaScript，用媒体查询配合伪元素 content 或多段 span 显示/隐藏，随视口宽度自动切换文案。
#responsive #media-queries #pseudo-element
阅读全文 大整数相加
用字符串模拟竖式加法，处理超出 Number 精度的大正整数求和，常见前端面试手写题。
#algorithm #interview
阅读全文 Vue 3 组合式 API 入门
通过一个简单的计数器示例，了解 ref、响应式与事件处理，并可在下方实时编辑预览。
#vue3 #composition-api
阅读全文 Flexbox 布局实战
用 Flex 实现常见的卡片居中布局，并通过代码 playground 直观感受对齐方式的变化。
#flexbox #layout
阅读全文