Css

本文深度剖析了 CSS Flexbox 布局中的 flex 简写属性及其三个核心构成部分：flex-grow, flex-shrink 和 flex-basis。内容系统性地阐述了 Flexbox 的弹性尺寸算法，解释了这些属性如何协同工作以分配容器空间，并重点分析了 flex: 1 的行为及其在多行换行（flex-wrap）布局中的局限性，最后将其与 CSS Grid 进行了对比。

本文深度剖析了 CSS 中用于视觉上隐藏元素的多种技术。内容从 display: none, visibility: hidden, opacity: 0 到 off-screen 定位，系统性地对比了每种方法的实现原理及其对可访问性、文档流、渲染和事件触发的影响。

本文深度剖析了 CSS Sprites（CSS 雪碧图）这一经典的 Web 性能优化技术。内容系统性地阐述了其通过将多张图片合并为单一文件以减少 HTTP 请求的核心原理，并详细拆解了利用 background-image 和 background-position 的实现方法。笔记还进一步探讨了该技术的性能权衡、维护成本，及其在 HTTP/2 和 SVG 盛行的现代 Web 开发中的地位与替代方案。

本文深度剖析了 CSS 中用于管理元素 Z 轴层叠顺序的核心概念——堆叠上下文 (Stacking Context)。内容系统性地阐述了 z-index 的工作原理、堆叠上下文的创建条件（包括现代的 isolation: isolate 属性）及其原子性的、层级化的渲染规则。笔记还进一步辨析了作为 CSS 规范的“堆叠上下文”与作为浏览器性能优化实现细节的“合成层”之间的精确关系。

本文深度剖析了在 Tailwind CSS v4 中实现暗黑模式 (Dark Mode) 的两种核心策略：基于 prefers-color-scheme 媒体查询的自动模式，以及通过 @custom-variant 实现的、基于 class 或 data-attribute 的手动模式。