CSS 知识体系导图
一、CSS基础深入（入门与进阶）
1. CSS核心基础与语法
CSS语法结构：选择器、声明块（属性: 值）、分号分隔、注释写法（/* */）
CSS引入方式：内联样式（style属性，优先级最高）、内部样式（style标签）、外部样式（link标签，推荐）、@import（区别于link，加载顺序不同）
CSS特性：层叠性（权重决定优先级）、继承性（文本类属性可继承，布局类不可）、特异性（选择器权重计算）
CSS版本差异：CSS2.1核心特性、CSS3新增特性（模块化、兼容性处理）
2. 选择器（常见基础）
基础选择器：元素选择器、类选择器（.）、ID选择器（#）、通配符选择器（*）、属性选择器（[attr]、[attr=value]等）
复合选择器：后代选择器（空格）、子选择器（>）、相邻兄弟选择器（+）、通用兄弟选择器（~）、交集选择器（元素+类/ID）
伪类选择器（重点）：
状态伪类：:hover、:active、:focus、:link、:visited（链接专属）
结构伪类：:nth-child()、:nth-of-type()、:first-child、:last-child、:only-child、:empty
其他伪类：:not()（否定选择器）、:target（锚点目标）、:enabled/:disabled（表单状态）
伪元素选择器（重点）：::before、::after（必须加content属性）、::first-letter、::first-line、::selection（选中文本）
选择器权重：!important（最高，慎用）> 内联样式（1000）> ID选择器（100）> 类/伪类/属性选择器（10）> 元素/伪元素选择器（1）> 通配符（0）
3. 盒模型（核心难点）
盒模型组成：content（内容区）、padding（内边距）、border（边框）、margin（外边距）
两种盒模型及区别：
标准盒模型（W3C）：width/height = content宽度/高度（默认），box-sizing: content-box
怪异盒模型（IE）：width/height = content + padding + border，box-sizing: border-box（开发常用，避免计算麻烦）
margin相关：margin重叠（垂直方向，相邻元素/父子元素，解决方案：BFC、padding替代、overflow:hidden）、marginauto（水平居中原理）、margin负值应用（排版偏移）
padding相关：padding不能为负值、内边距会影响盒模型整体大小（标准盒模型下）、背景会覆盖padding区域
border相关：border-style（必须设置才会显示边框）、border-radius（圆角，椭圆/半圆实现）、border-image（边框图片）
4. 文本与字体样式
文本样式：color（颜色值：十六进制、rgb/rgba、hsl/hsla）、text-align（水平对齐）、text-decoration（下划线、删除线等）、text-indent（首行缩进）、line-height（行高，垂直居中核心）、letter-spacing（字间距）、word-spacing（词间距）、text-overflow（文本溢出处理：ellipsis省略号）
字体样式：font-family（字体族， fallback机制）、font-size（字体大小，rem/em/px区别）、font-weight（字体粗细，normal/bold/100-900）、font-style（ italic/oblique倾斜）、font（复合属性，顺序：font-style font-weight font-size/line-height font-family）
文本溢出与换行：white-space（nowrap不换行）、overflow（hidden隐藏溢出）、text-overflow: ellipsis（单行省略）、多行省略（结合-webkit-line-clamp）
字体图标：原理（Unicode/Font Awesome）、优势（矢量无损、可通过CSS修改样式）、使用方式
二、CSS布局（进阶核心）
1. 传统布局（基础必备）
流式布局（Float布局）：
核心：float: left/right/none，脱离文档流（不占正常布局空间）
清除浮动（重点）：clear: both、伪元素清除法（::after）、overflow: hidden（触发BFC）、额外标签法
应用场景：早期页面布局、文字环绕效果，缺点：容易出现高度塌陷
定位布局（Position）：
static（默认）：正常文档流，不脱离，top/right/bottom/left无效
relative（相对定位）：不脱离文档流，相对于自身原有位置定位，不影响其他元素
absolute（绝对定位）：脱离文档流，相对于最近的已定位祖先元素（非static），无则相对于body
fixed（固定定位）：脱离文档流，相对于视口（viewport）定位，滚动不跟随
sticky（粘性定位）：结合relative和fixed，滚动到指定位置后固定，未到位置时正常流
常见要点：定位层级（z-index）、absolute与fixed的区别、sticky的兼容性
表格布局（Table）：display: table/table-row/table-cell，适用于规整数据展示，缺点：灵活性差、不利于响应式
2. 现代布局（高级重点）
Flex布局（弹性布局，重点）：
核心概念：容器（display: flex）、项目、主轴（flex-direction定义，row/column等）、交叉轴
容器属性：flex-direction（主轴方向）、flex-wrap（是否换行）、justify-content（主轴对齐）、align-items（交叉轴对齐）、align-content（多主轴对齐）
项目属性：flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（基准尺寸）、flex（复合属性，grow shrink basis）、align-self（单独对齐方式）、order（排序）
应用场景：页面布局、组件内部对齐、响应式适配，优势：简洁、灵活，解决传统布局痛点
常见要点：Flex实现水平垂直居中、flex: 1的含义、flex-wrap的作用
Grid布局（网格布局，常见拓展）：
核心概念：容器（display: grid）、项目、网格线、行（grid-row）、列（grid-column）、单元格
容器属性：grid-template-rows（行高）、grid-template-columns（列宽，fr单位）、grid-gap/grid-column-gap/grid-row-gap（间距）、justify-items（水平对齐）、align-items（垂直对齐）、grid-template-areas（区域命名）
项目属性：grid-row-start/end（行占位）、grid-column-start/end（列占位）、grid-area（指定区域）
与Flex区别：Flex是一维布局（主轴），Grid是二维布局（行+列），复杂布局更高效
响应式布局（重点）：
核心原理：媒体查询（@media），根据屏幕尺寸（width/height）切换样式
常用断点：移动端（<768px）、平板（768px-1024px）、桌面端（>1024px）
实现方式：媒体查询+Flex/Grid、rem/em单位（结合html字体大小）、vw/vh单位（视口占比）、自适应图片（max-width: 100%）
常见问题：移动端适配（viewport设置：meta name="viewport" content="width=device-width, initial-scale=1.0"）、响应式布局兼容性
3. 布局常见问题与解决方案
水平居中：inline/inline-block元素（text-align: center）、block元素（margin: 0 auto）、Flex（justify-content: center）、Grid（justify-items: center）
垂直居中：line-height（单行文本，与height相等）、Flex（align-items: center）、Grid（align-items: center）、absolute+transform（top: 50%; left: 50%; transform: translate(-50%, -50%)）
两栏布局：Flex（左侧固定，右侧flex: 1）、Grid（grid-template-columns: 固定值 1fr）、Float（左侧float，右侧margin-left）
三栏布局：Flex（两侧固定，中间flex: 1）、Grid（grid-template-columns: 固定值 1fr 固定值）、圣杯布局、双飞翼布局（传统方案，考察布局思路）
等高布局：Flex（align-items: stretch，默认）、Grid、padding-bottom+margin-bottom负值、BFC
三、CSS高级特性（进阶与深化）
1. BFC（块级格式化上下文，核心难点）
定义：独立的渲染区域，内部元素的布局不会影响外部元素，外部元素也不会影响内部
触发条件（重点）：根元素（html）、float: 非none、position: absolute/fixed、display: inline-block/table-cell/flex/grid、overflow: 非visible（hidden/auto/scroll）
应用场景（重点）：清除浮动（解决高度塌陷）、避免margin重叠、隔离布局（防止元素被浮动元素覆盖）
核心特点：内部块级元素垂直排列、margin不会与外部重叠、可以包含浮动元素、不会被浮动元素覆盖
2. CSS3新增特性（重点）
边框与背景：border-radius（圆角）、border-shadow（阴影，box-shadow: 水平偏移 垂直偏移 模糊度 扩散度 颜色 内外阴影）、background-image（多背景图）、background-size（cover/contain）、background-position（背景定位）、background-clip（背景裁剪）
渐变（Gradient）：线性渐变（linear-gradient）、径向渐变（radial-gradient）、重复渐变（repeating-linear-gradient），应用于背景、文字渐变
过渡（Transition，重点）：
核心语法：transition: 过渡属性 过渡时长 过渡 timing-function 延迟时间
timing-function：ease（默认）、linear（匀速）、ease-in（慢进）、ease-out（慢出）、ease-in-out（慢进慢出）
应用场景： hover效果、元素状态切换（如弹窗显示/隐藏），注意：只能过渡可计算的属性（如width、opacity，不能过渡display: none）
动画（Animation，重点）：
核心语法：@keyframes 动画名 { 关键帧 }、animation: 动画名 时长 timing-function 延迟 播放次数 方向 填充模式
关键属性：animation-iteration-count（播放次数，infinite无限）、animation-direction（reverse反向）、animation-fill-mode（forwards保持最后一帧）、animation-play-state（paused/running控制播放暂停）
与Transition区别：Animation可自定义关键帧、可自动播放、可循环，Transition需触发（如hover）、只有开始和结束状态
变换（Transform，重点）：
2D变换：translate（平移）、scale（缩放）、rotate（旋转）、skew（倾斜）、matrix（矩阵变换）
3D变换：translate3d、scale3d、rotate3d、perspective（透视）、transform-style: preserve-3d（保留3D效果）
注意：transform不会脱离文档流，不会影响其他元素布局，会创建新的堆叠上下文
其他新增：box-sizing（盒模型切换）、opacity（透明度，0-1，会继承）、rgba/hsla（带透明度颜色）、calc()（动态计算值，如width: calc(100% - 20px)）
3. 堆叠上下文（Stacking Context）
定义：元素在z轴上的渲染顺序，形成独立的堆叠层级，内部元素的堆叠不会超出上下文
触发条件：根元素、position: absolute/fixed、z-index非auto、display: flex/grid（子元素z-index生效）、opacity<1、transform非none等
堆叠顺序（从下到上）：背景和边框（当前上下文）→ 负z-index元素 → 正常文档流非定位元素 → 浮动元素 → 正常文档流定位元素 → 正z-index元素
常见要点：z-index失效原因（未触发堆叠上下文、父元素z-index低于其他元素）、堆叠上下文嵌套规则
4. CSS预处理器（实战必备）
常见预处理器：Sass（Scss）、Less、Stylus，核心作用：简化CSS编写、提高复用性、实现逻辑控制
核心特性（重点）：
变量（$变量名，Sass/Scss；@变量名，Less）：存储颜色、尺寸等，统一管理
嵌套（Nesting）：选择器嵌套，简化层级编写，避免重复书写父选择器
混合（Mixin）：封装可复用的样式片段，可传递参数（如封装圆角、阴影样式）
继承（Extend）：继承其他选择器的样式，减少代码冗余（Sass: @extend；Less: &:extend()）
运算与函数：支持加减乘除运算、颜色函数（如lighten/darken调整颜色亮度）
Sass与Less区别：编译方式（Sass需Ruby环境，Less可通过JS编译）、语法细节（Sass无大括号分号，Scss有；Less变量用@）
四、CSS 兼容性与性能优化
1. CSS兼容性处理
浏览器前缀（厂商前缀）：-webkit-（Chrome/Safari）、-moz-（Firefox）、-ms-（IE）、-o-（Opera），用于兼容CSS3新特性（如-webkit-border-radius）
兼容性查询工具：Can I Use（查询属性在各浏览器的支持情况）
兼容方案：
渐进增强：先实现基础功能，再为高级浏览器添加增强效果
优雅降级：先实现高级功能，再为低版本浏览器添加兼容 fallback
工具辅助：Autoprefixer（自动添加浏览器前缀）、PostCSS（CSS转换工具）
常见兼容问题：IE浏览器（盒模型、Flex兼容性、动画兼容性）、移动端浏览器（viewport设置、touch事件样式）
2. CSS性能优化（重点）
选择器优化：避免使用通配符、避免深层嵌套（减少选择器匹配时间）、优先使用类选择器/ID选择器（权重高、匹配快）、避免使用复杂伪类
样式优化：
合并重复样式，提取公共样式（减少代码体积）
避免使用@import（会阻塞CSS加载，优先用link）
简化样式属性（如用复合属性：font、background，替代单个属性）
避免使用expression（IE专属，性能极差）、filter（尽量用CSS3替代）
渲染优化（减少重排重绘，重点）：
重排（Reflow）：布局改变导致元素位置/尺寸变化（如修改width、height、margin、display），性能消耗大
重绘（Repaint）：样式改变但不影响布局（如修改color、background-color、opacity），性能消耗小于重排
优化方案：批量修改样式（用class切换替代单个属性修改）、避免频繁操作DOM、使用transform/opacity实现动画（仅触发重绘，不触发重排）、避免table布局（容易触发重排）、使用will-change（提前告知浏览器元素将要变化，优化渲染）
其他优化：压缩CSS（减少文件体积）、使用CDN加载CSS、样式放在head标签（避免页面闪烁）、避免inline样式（不利于复用和维护）
3. CSS工程化（拓展）
CSS模块化：避免样式污染，如CSS Modules（将样式作用域限制在组件内）、Shadow DOM（影子DOM，隔离组件样式）
CSS-in-JS：将CSS写在JS中（如styled-components、emotion），优势：组件化样式、动态样式易实现，缺点：性能开销、调试不便
样式规范：BEM命名规范（Block-Element-Modifier，如header__logo--active）、OOCSS（面向对象CSS，分离结构与样式）、SMACSS（可扩展模块化CSS）