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. 缓动函数

相关资源 ​