CSS 属性分类

温宇飞
45 阅读4分钟

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

盒模型对齐

  • 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 组成
  • letterSpacing
  • wordSpacing

render - change

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

变换: transform translate scale rotate perspective

overflow

  • 非文本: overflowX overflowY
  • 文本: textOverflow

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
  • backdropFilter
  • mixBlendMode: 元素的内容应该与元素的直系父元素的内容和元素的背景如何混合
  • opacity
  • boxShadow/textShadow(只为文本添加 shadow)

render - clip

遮罩和裁剪属性用于控制元素的可见区域，创建复杂的视觉效果。

  • mask: mask-image mask-clip
  • clip-path

render - other

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

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

other

  • appearance
avatar
文章
阅读
粉丝