Skip to content

CSS 概念

本部分深入探讨 CSS 的核心概念和原理,帮助您理解 CSS 的工作机制。

核心概念

层叠(Cascade)

层叠是 CSS 的核心机制,决定了当多个样式规则匹配同一元素时,哪个规则生效。

优先级(Specificity)

优先级用于计算不同选择器的权重,决定哪个样式规则优先应用。

继承(Inheritance)

某些 CSS 属性会从父元素继承到子元素,这种机制称为继承。

盒模型(Box Model)

盒模型描述了元素如何占据空间和渲染,包括内容、内边距、边框和外边距。

正常文档流(Normal Flow)

正常文档流是元素在页面中的默认排列方式。

包含块(Containing Block)

包含块是元素定位和尺寸计算的参考基准。

堆叠上下文(Stacking Context)

堆叠上下文决定了元素在 z 轴方向上的层叠顺序。

布局概念

布局上下文(Layout Context)

布局上下文定义了 CSS 布局的机制。

格式化上下文(Formatting Context)

格式化上下文定义了 CSS 格式化的机制。

BFC(Block Formatting Context)

块级格式化上下文影响块级元素的布局。

FFC(Flex Formatting Context)

弹性格式化上下文用于 Flexbox 布局。

GFC(Grid Formatting Context)

网格格式化上下文用于 Grid 布局。

视觉概念

颜色空间(Color Space)

颜色空间定义了不同颜色的表示方法。

颜色模型(Color Models)

颜色模型定义了 CSS 颜色的模型。

不透明度(Opacity)

不透明度控制元素的透明程度。

混合模式(Blend Mode)

混合模式定义了元素如何与背景混合。

动画与变换

变换原点(Transform Origin)

变换原点是变换的参考点。

动画计时(Animation Timing)

动画计时定义了动画的速度曲线。

缓动函数(Easing Function)

缓动函数定义了动画的速度变化。

阅读建议

建议按照以下顺序阅读:

  1. 层叠机制
  2. 优先级
  3. 继承
  4. 盒模型
  5. 正常文档流
  6. 包含块
  7. 堆叠上下文
  8. 布局上下文
  9. 格式化上下文
  10. BFC/FFC/GFC
  11. 颜色空间
  12. 颜色模型
  13. 不透明度
  14. 混合模式
  15. 变换原点
  16. 动画计时
  17. 缓动函数

相关资源