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: 定义元素的显示类型
- block: 块级元素，独占一行
- inline: 行内元素，与其他元素在同一行
- inline-block: 行内块元素，兼具两种特性
- none: 隐藏元素，不占据空间
position: 控制元素的定位方式
- static: 默认值，正常文档流
- relative: 相对定位，相对于自身原位置
- absolute: 绝对定位，相对于最近的定位父元素
- fixed: 固定定位，相对于视口
- sticky: 粘性定位，在滚动时保持固定
float: 浮动布局（传统布局方式）
- left/right: 向左或向右浮动
- none: 不浮动（默认值）
inset: 定位偏移属性
- top/right/bottom/left: 分别控制四个方向的偏移距离

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

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

Flexbox

grid

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

盒模型对齐

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

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

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

font

控制实际渲染出的字符

text

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

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

变换: transform translate scale rotate

overflow

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）

视觉效果属性为元素添加各种视觉特效，包括滤镜、阴影、透明度等，增强页面的视觉吸引力。

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

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