CSS

CSS选择器用于选中HTML元素并应用样式，是CSS的核心概念，包括基础选择器和复合选择器两大类。

类选择器通过class属性值选中元素，权重为10，可重复使用，是最常用的选择器类型。

ID选择器通过id属性值选中元素，权重为100，页面中唯一，适合选中特定单个元素。

标签选择器通过HTML元素名称选中元素，权重最低为1，适合设置全局基础样式。

属性选择器通过元素的属性或属性值匹配元素，权重为10，支持精确匹配、包含匹配等多种模式。

伪类选择器根据元素状态或位置匹配元素，权重为10，包括状态伪类、结构伪类、表单伪类等。

伪元素选择器创建虚拟元素并添加样式，权重为1，包括::before、::after、::first-letter等。

组合选择器将多个选择器组合使用，包括后代、子代、相邻、兄弟选择器，实现精确元素定位。

CSS优先级决定样式生效顺序，继承使子元素自动获得父元素部分样式，是理解CSS层叠机制的关键。

CSS盒模型将每个元素视为矩形盒子，由内容区、内边距、边框、外边距四部分组成，是布局基础。

content-box是CSS盒模型的默认模式，width和height仅计算内容区域，padding和border额外增加元素尺寸。

border-box模式下，width和height包含内容区、内边距和边框，是现代布局推荐的计算方式。

padding属性设置元素内边距，控制内容与边框之间的空间，是盒模型的重要组成部分。

border属性设置元素边框样式，包括宽度、样式、颜色，是盒模型可视化边界的基础。

margin属性设置元素外边距，控制元素与其他元素之间的间距，是布局的核心属性。

box-sizing属性定义元素宽高的计算方式，content-box只算内容，border-box包含内边距和边框。

外边距折叠是CSS特性，相邻块级元素的垂直外边距会合并为较大值，父子元素间也存在折叠现象。

CSS背景与边框属性用于设置元素的视觉样式，包括背景颜色、图片、边框样式等，是页面美化基础。

CSS文本样式属性控制文字外观，包括字体、颜色、对齐、行高、装饰等，是排版基础。

CSS动画与过渡实现元素状态变化的动态效果，过渡用于简单状态切换，动画用于复杂关键帧序列。

浮动是CSS传统布局方式之一，用于实现文字环绕和多列布局，需配合清除浮动使用。

CSS定位通过position属性控制元素位置，包括相对定位、绝对定位、固定定位和粘性定位四种模式。

Flexbox是一维弹性布局模型，用于处理行或列方向的元素排列与对齐，是现代CSS布局的基础。

CSS Grid是二维布局系统，可同时控制行与列，适合构建复杂的页面布局结构。

媒体查询是响应式设计的核心技术，用于根据设备特性应用不同的样式规则。

视口单位（vw、vh、vmin、vmax）是相对于视口尺寸的相对单位，非常适合构建响应式布局。

响应式图片技术让网页根据设备特性加载合适尺寸的图片，提升性能与用户体验。

移动优先设计是一种响应式开发策略，先为小屏设备编写样式，再逐步增强至大屏设备。

CSS 选择器优先级决定样式覆盖规则，理解优先级计算方式有助于精准控制样式生效。

CSS 层叠规则决定样式冲突时的覆盖方式，继承机制让子元素自动获得父元素样式，理解两者是掌握 CSS 的关键。

CSS过渡（transition）用于元素状态变化时的平滑动画效果，本文介绍过渡的基本概念、触发方式与简单用法。

详细讲解transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性及其参数配置。

CSS关键帧动画通过@keyframes定义动画序列，实现比过渡更复杂的动画效果，支持多状态、循环、反向播放等特性。

详细讲解animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state八个动画属性。

深入讲解CSS动画性能优化策略，包括GPU加速、will-change属性、合成层优化、重绘与回流控制等核心技术。

gap 属性用于设置 Flex/Grid 容器中子元素之间的间距，替代传统的 margin 方案。

Flex 布局天然支持等高列，利用 align-items 和 flex-grow 可轻松实现等高等宽布局。

媒体查询配合 Flex/Grid 布局可实现响应式设计，根据屏幕尺寸自动切换不同布局模式。

grid-template-areas 通过命名区域定义布局，使代码可读性强、易于维护，适合复杂页面布局。

grid-column 和 grid-row 用于控制子元素跨越多行多列，实现复杂的网格布局。

auto-fit 和 auto-fill 用于创建自动响应的网格布局，无需媒体查询即可适应不同屏幕宽度。

minmax() 定义轨道尺寸范围，repeat() 简化重复定义，两者结合可实现响应式网格布局。

align-self 用于单独控制 Flex 子元素的交叉轴对齐方式，覆盖容器的 align-items 设置。

order 属性用于调整 Flex 子元素的显示顺序，无需修改 DOM 结构即可实现灵活排序。

BFC 是 CSS 中重要的布局概念，理解 BFC 能解决浮动塌陷、外边距合并等常见布局问题。

fr 单位是 Grid 布局专用的弹性单位，用于按比例分配剩余空间，实现灵活的响应式布局。

变量是预处理器的核心特性，理解作用域规则对避免样式冲突至关重要。

嵌套是 CSS 预处理器的核心特性，让样式层级结构与 HTML 保持一致，提高代码可读性。

Mixin 是可复用的样式片段，支持参数传递，是 CSS 预处理器最强大的特性之一。

Extend 实现选择器间的样式继承，与 Mixin 相比生成更紧凑的 CSS 代码。

CSS 预处理器支持数学运算、颜色函数、字符串处理等，让样式更具动态性和可计算性。

条件判断和循环语句让预处理器具备编程能力，可批量生成样式、实现逻辑控制。

预处理器支持文件拆分与模块化组织，通过 @import 和 @use 实现代码复用和维护性。

Sass 和 Less 是最流行的 CSS 预处理器，语法和功能各有差异，本文对比两者核心区别。

CSS 性能优化贯穿加载、解析、渲染全流程，本文概述关键优化策略和最佳实践。

CSS 选择器的写法直接影响渲染性能，本文介绍选择器匹配原理及优化策略，提升页面渲染效率。

重排和重绘是浏览器渲染的关键概念，理解两者区别及触发条件，有助于编写高性能 CSS。

高性能 CSS 动画的关键在于利用 GPU 加速和合成层，本文介绍动画性能优化策略及最佳实践。

will-change 属性提前告知浏览器元素即将变化，优化渲染性能，但需谨慎使用避免过度消耗资源。

关键 CSS 是首屏渲染必需的样式，提取并内联关键 CSS 可显著提升首屏加载速度。

图片是网页性能优化的重点，合理使用 CSS Sprites、现代图片格式和响应式图片可显著提升加载速度。

CSS @import 会阻塞渲染且造成串行加载，应使用 link 标签替代，提升页面加载性能。

深入理解浏览器回流与重绘的触发机制，掌握减少回流重绘的性能优化策略。

深入理解浏览器合成层机制，掌握GPU加速原理与渲染性能优化策略。

深入理解BFC、IFC、FFC、GFC等CSS格式化上下文，掌握布局隔离与渲染边界原理。

深入解析浏览器CSS渲染流水线的完整流程，从DOM构建到像素输出，掌握关键渲染路径优化核心原理。

CSS选择器优先级决定样式应用顺序，理解权重计算规则是解决样式冲突的关键。

:not()伪类选择器匹配不符合指定条件的元素，实现反向选择，提高样式编写灵活性。

CSS级联规则决定样式声明优先级，层叠上下文定义元素在Z轴上的渲染层级，两者是理解CSS渲染的核心。

!important强制提升样式优先级，可覆盖任何正常规则，但滥用会导致样式难以维护和调试。

容器查询是CSS新特性，允许元素根据其容器尺寸而非视口尺寸调整样式，实现真正的组件级响应式设计。

完整解析容器查询语法结构，包括容器声明、查询条件、规则编写与常用模式。

对比分析容器查询与媒体查询的核心差异，理解两者的适用场景与组合使用策略。

容器查询单位相对于容器尺寸计算，包括cqw、cqh、cqi、cqb、cqmin、cqmax六种，实现真正的组件级相对尺寸。

容器类型决定查询维度和样式限制范围，inline-size查询单方向，size查询双向，normal不做限制。

分析容器查询的浏览器支持情况，介绍兼容性检测方法和polyfill方案，确保平滑过渡。

通过卡片布局实战案例，展示容器查询在组件级响应式设计中的完整应用流程与最佳实践。

结合CSS Grid布局与容器查询，实现网格项宽度动态变化时的组件自适应，构建弹性布局系统。

掌握命名容器查询语法与嵌套容器处理策略，精确控制多容器场景下的样式查询。

深入解析CSS动画的渲染管线原理，理解GPU硬件加速机制，掌握高性能动画的实现方法。

深入解析CSS关键帧动画的性能优化策略，包括属性选择、关键帧设计、合成层管理与渲染优化。

transform和opacity是唯一只触发合成阶段的CSS属性，掌握其优化技巧可实现60fps流畅动画。

will-change属性提前告知浏览器元素即将变化，让浏览器提前优化，但需谨慎使用避免资源浪费。

requestAnimationFrame是浏览器原生动画API，在渲染帧前执行，确保动画流畅且不阻塞主线程。

深入理解浏览器复合层架构与渲染管线各阶段，掌握层管理与GPU合成的底层机制。

系统介绍浏览器动画性能监测工具，包括DevTools、Performance面板、Layers面板的使用方法与指标分析。

针对低性能设备的CSS动画适配策略，包括降级方案、性能检测、渐进增强与资源优化。

CSS可维护性代码组织的核心策略，包括文件结构规划、命名规范、模块化设计与复用原则。

BEM是一种CSS命名方法论，通过Block、Element、Modifier三层结构实现样式隔离与复用，有效解决命名冲突和代码维护问题。

OOCSS和SMACSS是两种经典CSS架构方法论，通过结构化命名和分层管理提升代码可维护性与复用性。

系统介绍CSS浏览器兼容性处理方案，包括自动前缀、特性检测、渐进增强与优雅降级等核心策略。