CSS 属性分类

CSS 属性众多且功能各异，掌握它们的分类和用途对于高效开发至关重要。本文将按照功能模块对 CSS 属性进行系统性分类，帮助开发者建立清晰的属性知识体系。当前属性不全，本文会动态更新。

盒模型

盒模型是 CSS 布局的基础，它定义了元素如何占据空间以及如何与其他元素交互。盒模型属性主要控制元素的内容区域、内边距、边框和外边距。

• boxSizing: 控制盒模型的计算方式

  • content-box: 默认值，width/height 只包含内容区域
  • border-box: width/height 包含内容、内边距和边框

• 尺寸控制: 定义元素的大小范围

  • width/height: 设置元素的基本尺寸
  • minWidth/minHeight: 设置最小尺寸限制
  • maxWidth/maxHeight: 设置最大尺寸限制

• 外边距 (margin): 控制元素与其他元素之间的距离

  • marginTop/marginRight/marginBottom/marginLeft: 分别控制四个方向的外边距
  • margin: 简写属性，可同时设置多个方向

• 内边距 (padding): 控制元素内容与边框之间的距离

  • paddingTop/paddingRight/paddingBottom/paddingLeft: 分别控制四个方向的内边距
  • padding: 简写属性，可同时设置多个方向

• 边框 (border): 定义元素的边框样式

  • borderColor: 边框颜色，包含四个方向的子属性
  • borderStyle: 边框样式（实线、虚线、点线等）
  • borderWidth: 边框宽度
  • borderRadius: 边框圆角，包含四个角的子属性

布局

布局属性决定了元素在页面中的位置和排列方式。现代 CSS 提供了多种布局方案，每种都有其特定的使用场景和优势。

基础布局属性

• display: 定义元素的显示类型
• position: 控制元素的定位方式
• float: 浮动布局（传统布局方式）
• inset: 定位偏移属性 top/right/bottom/left

IFC 专属: IFC 是行内元素的布局环境，主要控制文本和行内元素的排列方式。

• textAlign: 水平对齐
• verticalAlign: 垂直对齐方式
• 文本专属:
  • letterSpacing: 字符间距
  • wordSpacing: 单词间距
  • whiteSpace: 空白符处理方式
  • wordBreak: 是否换行

Flexbox

• container: flexDirection flexWrap
• item: flex(flexGrow flexShrink flexBasis) order

grid

• container:
  • 显示网格定义: gridAutoRows gridAutoColumns gridAutoFlow
  • 隐示网格定义: gridTemplateRows gridTemplateColumns gridTemplateAreas
• item 定位: gridColumnStart gridColumnEnd gridRowStart gridRowEnd

box align

• container:
  • 对齐方式: justifyContent alignContent justifyItems alignItems
  • item 间距: rowGap columnGap
• item: justifySelf alignSelf

render - content

渲染内容属性控制元素的外观和视觉效果，包括背景、边框、轮廓等装饰性元素。

• border: 见盒模型

• background

  • backgroundColor
  • backgroundClip
  • backgroundOrigin
  • backgroundAttachment
  • backgroundImage
  • backgroundPosition
  • backgroundRepeat
  • backgroundSize

• outline

  • outlineColor
  • outlineStyle
  • outlineWidth
  • outlineOffset

render - content - text

文本渲染属性专门用于控制文字的外观、排版和显示效果，是网页内容可读性的重要保障。

font

• fontFamily: 设置字体系列，指定字体名称
• fontSize: 设置字体大小
• fontStyle: 设置字体样式（正常/斜体/倾斜）
• fontWeight: 设置字体粗细（100-900 或关键字）
• fontStretch: 设置字体拉伸程度（压缩/扩展）
• fontVariant: 设置字体变体（如小型大写字母）
• lineHeight: 设置行高，控制行间距

控制实际渲染出的字符

• textTransform: 转换大小写
• whiteSpace: 控制空白符
• wordBreak: 指定了怎样在单词内换行

text

• color
• text-decoration: 装饰文本，由 text-decoration-line text-decoration-style text-decoration-color 组成
• text-underline
• letterSpacing
• wordSpacing

render - change

变换和动画属性为网页添加动态效果和交互性，提升用户体验。

变换: transform translate scale rotate perspective

滚动：overflow: scoll

transition/animation

• transition: 过渡属性简写

  • transition-property: 指定要过渡的 CSS 属性
  • transition-duration: 过渡持续时间
  • transition-timing-function: 过渡时间函数（ease/linear/ease-in/ease-out/ease-in-out/cubic-bezier）
  • transition-delay: 过渡延迟时间

• animation: 动画属性简写

  • animation-name: 动画名称，对应@keyframes 规则
  • animation-duration: 动画持续时间
  • animation-timing-function: 动画时间函数
  • animation-delay: 动画延迟时间
  • animation-iteration-count: 动画重复次数（数字/infinite）
  • animation-direction: 动画方向（normal/reverse/alternate/alternate-reverse）
  • animation-fill-mode: 动画填充模式（none/forwards/backwards/both）
  • animation-play-state: 动画播放状态（running/paused）

render - effect

视觉效果属性在渲染管线中对像素进行处理。部分效果需要创建层叠上下文（将元素独立渲染到纹理再合成），部分效果直接在绘制时应用。

创建层叠上下文

• filter: 对元素应用图像处理算法（取值可组合使用）

  • 空间域卷积: blur(radius) — 高斯模糊卷积核
  • 颜色矩阵变换: brightness(%) contrast(%) saturate(%) grayscale(%) sepia(%) — 对每个像素的 RGB 应用矩阵乘法
  • 颜色空间旋转: hue-rotate(deg) — 在 HSL 颜色空间旋转色相
  • 逐像素函数: invert(%) opacity(%) — 对每个像素独立计算
  • 形状感知: drop-shadow(x y blur color) — 基于 alpha 通道的投影（非矩形）

• backdropFilter: 对元素背后的内容应用滤镜（取值同 filter，需先捕获背景层）

• mixBlendMode: 元素与下层内容的像素混合函数，如 result = src × dst（multiply 模式）

不创建层叠上下文

• backgroundBlendMode: 元素多个背景层之间的混合方式
• boxShadow: 根据元素边界生成高斯模糊阴影
• textShadow: 为文本生成偏移模糊副本作为阴影

render - visibility

可见性控制属性用于控制元素的显示状态和可见区域，创建复杂的视觉效果。

基础可见性：visibility 和 opacity 都可以隐藏元素且仍然占据空间，但它们的行为有重要区别：

特性	visibility	opacity
隐藏方式	hidden/visible 离散切换	0-1 连续变化
事件响应	hidden 时不响应任何事件	即使为 0 仍然响应事件（可点击、hover）
子元素覆盖	子元素可设置 visibility: visible 重新显示	子元素无法覆盖父元素的透明度
过渡动画	只能离散切换	可以平滑过渡（0 到 1 之间连续变化）
渲染影响	改变时触发重绘（repaint）	改变时触发重绘（repaint）
层叠上下文	不创建	opacity < 1 会创建层叠上下文

裁剪 (硬边界)：裁剪属性通过几何路径或容器边界直接切除元素的部分区域，被裁剪的部分完全不可见。

• clip-path: 使用几何路径（圆形、多边形、SVG 路径等）裁剪元素，创建不规则形状
• overflow/overflowX/overflowY: 当内容超出容器时的处理方式（visible/hidden/scroll/auto）

遮罩 (支持透明度渐变)：遮罩属性使用图像的 alpha 通道来控制元素的透明度。遮罩图像中黑色区域对应完全透明，白色区域完全不透明，灰色区域产生半透明效果。这使得遮罩可以创建平滑的渐变过渡效果，而不像裁剪那样只有硬边界。

• mask: 遮罩简写属性
• mask-image: 指定遮罩图像（可以是渐变、SVG、PNG 等）
• 遮罩形状: mask-clip mask-origin mask-size mask-repeat mask-position
• mask-mode: 遮罩模式，决定如何计算最终的 alpha 值
  • alpha: result.rgba = (src.r, src.g, src.b, src.a × mask.a)
  • luminance: result.rgba = (src.r, src.g, src.b, src.a × mask_luminance)
  • match-source: SVG <mask> 使用 luminance，其他图像使用 alpha
• mask-composite: 多个遮罩层的合成方式（当使用多个 mask-image 时）
  • add（默认）: result.a = min(mask1.a + mask2.a, 1) — 叠加
  • subtract: result.a = max(mask1.a - mask2.a, 0) — 从第一个遮罩中减去第二个
  • intersect: result.a = mask1.a × mask2.a — 交集，只显示两个遮罩都不透明的区域
  • exclude: result.a = mask1.a + mask2.a - 2 × (mask1.a × mask2.a) — 异或，只显示单个遮罩不透明的区域

render - other

这些属性处理元素的特殊显示需求和行为。

• zIndex: 层叠模型
• 替换元素: objectFit objectPosition aspectRatio

other

• appearance

渲染顺序

根据 W3C 规范定义，视觉效果属性在渲染管线中的执行顺序为：

W3C Compositing and Blending Level 1 - Section 3.1:

The compositing model must follow the SVG compositing model: first any filter effect is applied, then any clipping, masking, blending and compositing.

W3C Filter Effects Level 1 - Section 2:

The compositing model follows the SVG compositing model: first any filter effect is applied, then any clipping, masking and opacity. These effects all apply after any other CSS effects such as border.

1. 绘制元素（background, border, content）
   content 指内容区域：文本、子元素、替换元素的内容等
   ↓
2. backdrop-filter — 对元素背后的内容应用滤镜
   ↓
3. filter — 对元素自身应用滤镜
   ↓
4. clip-path — 裁剪
   ↓
5. mask — 遮罩
   ↓
6. opacity — 透明度
   ↓
7. mix-blend-mode — 与下层内容混合
   ↓
8. compositing — 与父级合成