mindmap
    id1[布局系统]
        id1-1[Flexbox 布局]
        id1-2[Flex 容器属性]
        id1-3[Flex 项目属性]
        id1-4[主轴与交叉轴概念]
        id1-5[响应式 Flex 布局]
        id1-6[Grid 布局]
        id1-7[网格容器属性]
        id1-8[网格项目属性]
        id1-9[显式网格与隐式网格]
        id1-10[网格模板区域]
        id1-11[网格自动布局算法]
        id1-12[多列布局]
        id1-13[column-count 与 column-width]
        id1-14[列间距与列规则]
        id1-15[跨列元素设置]

mindmap
    id2[响应式设计]
        id2-1[媒体查询]
        id2-2[视口尺寸查询]
        id2-3[设备特性查询]
        id2-4[媒体类型与逻辑操作符]
        id2-5[响应式断点设置]
        id2-6[容器查询]
        id2-7[容器查询单位]
        id2-8[容器查询条件]
        id2-9[容器查询与媒体查询对比]
        id2-10[视口单位]
        id2-11[vw、vh、vmin、vmax]
        id2-12[视口单位的应用场景]
        id2-13[移动端适配方案]

mindmap
    id3[选择器与伪类]
        id3-1[属性选择器]
        id3-2[精确匹配与部分匹配]
        id3-3[属性值匹配模式]
        id3-4[大小写敏感控制]
        id3-5[结构伪类]
        id3-6[:nth-child   系列]
        id3-7[:first-of-type 与 :last-of-type]
        id3-8[:only-child 与 :only-of-type]
        id3-9[状态伪类]
        id3-10[:focus-within]
        id3-11[:placeholder-shown]
        id3-12[:checked 与 :indeterminate]
        id3-13[逻辑组合伪类]
        id3-14[:is   选择器]
        id3-15[:where   选择器]
        id3-16[:has   选择器]

mindmap
    id4[自定义属性与变量]
        id4-1[CSS 变量定义]
        id4-2[全局变量与局部变量]
        id4-3[变量继承机制]
        id4-4[变量回退值设置]
        id4-5[变量应用]
        id4-6[颜色主题切换]
        id4-7[动态尺寸计算]
        id4-8[响应式变量控制]
        id4-9[变量与 JavaScript 交互]
        id4-10[获取和修改变量值]
        id4-11[实时样式更新]
        id4-12[主题切换实现]

mindmap
    id5[动画与过渡]
        id5-1[CSS 过渡]
        id5-2[transition 属性详解]
        id5-3[缓动函数类型]
        id5-4[过渡性能优化]
        id5-5[CSS 动画]
        id5-6[@keyframes 规则]
        id5-7[animation 属性配置]
        id5-8[动画填充模式]
        id5-9[动画方向控制]
        id5-10[变换效果]
        id5-11[D 变换函数]
        id5-12[D 变换与透视]
        id5-13[变换原点设置]
        id5-14[变换性能考虑]

mindmap
    id6[滤镜与混合模式]
        id6-1[滤镜效果]
        id6-2[模糊与亮度调整]
        id6-3[对比度与饱和度]
        id6-4[色相旋转与反转]
        id6-5[投影与发光效果]
        id6-6[混合模式]
        id6-7[背景混合模式]
        id6-8[元素混合模式]
        id6-9[混合模式应用场景]
        id6-10[遮罩与裁剪]
        id6-11[clip-path 属性]
        id6-12[mask 属性]
        id6-13[形状定义与路径裁剪]

mindmap
    id7[排版与字体]
        id7-1[可变字体]
        id7-2[字体轴概念]
        id7-3[字重与字宽变化]
        id7-4[斜体与光学尺寸]
        id7-5[文本效果]
        id7-6[text-shadow 高级应用]
        id7-7[文字描边效果]
        id7-8[文字渐变与图案填充]
        id7-9[排版控制]
        id7-10[line-clamp 文本截断]
        id7-11[首字下沉效果]
        id7-12[文本对齐与换行控制]

mindmap
    id8[颜色与背景]
        id8-1[现代颜色格式]
        id8-2[HSL 与 HSLA]
        id8-3[RGB 与 RGBA]
        id8-4[颜色函数与计算]
        id8-5[渐变背景]
        id8-6[线性渐变高级用法]
        id8-7[径向渐变与锥形渐变]
        id8-8[渐变图案与重复渐变]
        id8-9[背景混合]
        id8-10[background-blend-mode]
        id8-11[多重背景叠加]
        id8-12[背景裁剪与定位]

mindmap
    id9[滚动与交互]
        id9-1[滚动行为]
        id9-2[scroll-behavior 平滑滚动]
        id9-3[滚动捕捉点]
        id9-4[自定义滚动条样式]
        id9-5[用户交互]
        id9-6[pointer-events 控制]
        id9-7[user-select 文本选择]
        id9-8[touch-action 触摸行为]
        id9-9[焦点管理]
        id9-10[focus-visible 伪类]
        id9-11[焦点轮廓定制]
        id9-12[无障碍焦点指示]

mindmap
    id10[性能与优化]
        id10-1[渲染性能]
        id10-2[will-change 属性]
        id10-3[合成层优化]
        id10-4[重绘与重排避免]
        id10-5[加载优化]
        id10-6[content-visibility]
        id10-7[懒加载技术]
        id10-8[关键 CSS 提取]
        id10-9[现代单位系统]
        id10-10[相对长度单位]
        id10-11[容器查询单位]
        id10-12[逻辑属性与值]

mindmap
    id11[新特性与实验性功能]
        id11-1[CSS Houdini]
        id11-2[自定义属性与类型]
        id11-3[绘制 API]
        id11-4[布局与动画工作集]
        id11-5[嵌套规则]
        id11-6[CSS 原生嵌套语法]
        id11-7[嵌套选择器规则]
        id11-8[嵌套与特异性关系]
        id11-9[层叠层]
        id11-10[@layer 规则]
        id11-11[层优先级管理]
        id11-12[第三方样式集成]

mindmap
    id12[工具与工作流]
        id12-1[现代 CSS 方法论]
        id12-2[BEM 命名规范]
        id12-3[ITCSS 架构]
        id12-4[原子化 CSS 理念]
        id12-5[构建工具集成]
        id12-6[PostCSS 插件生态]
        id12-7[CSS 模块化方案]
        id12-8[样式压缩与优化]
        id12-9[测试与调试]
        id12-10[浏览器开发者工具]
        id12-11[跨浏览器兼容性]
        id12-12[性能分析工具]