# CSS 常用属性
注意：CSS属性总数超过500个，以下列出的是常用和主要的属性。随着CSS规范的更新，新的属性会不断加入。
# 文本属性
| 属性 |
说明 |
color |
设置文本颜色 |
font-family |
设置字体族 |
font-size |
设置字体大小 |
font-weight |
设置字体粗细 |
font-style |
设置字体样式(斜体等) |
text-align |
设置文本对齐方式 |
text-decoration |
设置文本装饰(下划线等) |
line-height |
设置行高 |
letter-spacing |
设置字符间距 |
word-spacing |
设置单词间距 |
text-transform |
控制文本大小写 |
text-indent |
设置首行缩进 |
text-shadow |
设置文本阴影 |
# 背景属性
| 属性 |
说明 |
background-color |
设置背景颜色 |
background-image |
设置背景图像 |
background-repeat |
设置背景图像重复方式 |
background-position |
设置背景图像位置 |
background-attachment |
设置背景图像是否固定 |
background-size |
设置背景图像尺寸 |
background-clip |
设置背景绘制区域 |
background-origin |
设置背景定位区域 |
# 盒模型属性
| 属性 |
说明 |
width |
设置元素宽度 |
height |
设置元素高度 |
margin |
设置外边距 |
padding |
设置内边距 |
border |
设置边框 |
border-radius |
设置边框圆角 |
box-shadow |
设置盒子阴影 |
box-sizing |
设置盒模型计算方式 |
overflow |
设置内容溢出时的行为 |
# 定位属性
| 属性 |
说明 |
position |
设置定位方式 |
top |
设置定位元素的上偏移 |
right |
设置定位元素的右偏移 |
bottom |
设置定位元素的下偏移 |
left |
设置定位元素的左偏移 |
z-index |
设置堆叠顺序 |
float |
设置浮动 |
clear |
清除浮动 |
# 布局属性(Flexbox)
| 属性 |
说明 |
display |
设置显示方式 |
flex-direction |
设置主轴方向 |
flex-wrap |
设置是否换行 |
flex-flow |
flex-direction和flex-wrap的简写 |
justify-content |
设置主轴对齐方式 |
align-items |
设置交叉轴对齐方式 |
align-content |
设置多行对齐方式 |
order |
设置项目排序顺序 |
flex-grow |
设置项目放大比例 |
flex-shrink |
设置项目缩小比例 |
flex-basis |
设置项目初始大小 |
flex |
flex-grow, flex-shrink和flex-basis的简写 |
align-self |
设置单个项目对齐方式 |
# 布局属性(Grid)
| 属性 |
说明 |
grid-template-columns |
定义列轨道大小 |
grid-template-rows |
定义行轨道大小 |
grid-template-areas |
定义网格区域 |
grid-template |
上述三个属性的简写 |
grid-column-gap |
设置列间距 |
grid-row-gap |
设置行间距 |
grid-gap |
设置行列间距简写 |
justify-items |
设置单元格内容水平对齐 |
align-items |
设置单元格内容垂直对齐 |
place-items |
align-items和justify-items的简写 |
justify-content |
设置网格水平对齐 |
align-content |
设置网格垂直对齐 |
place-content |
align-content和justify-content的简写 |
grid-auto-columns |
设置隐式创建的列轨道大小 |
grid-auto-rows |
设置隐式创建的行轨道大小 |
grid-auto-flow |
设置自动放置算法 |
grid |
多个网格属性的简写 |
# 过渡和动画属性
| 属性 |
说明 |
transition |
设置过渡效果 |
transition-property |
设置过渡属性 |
transition-duration |
设置过渡持续时间 |
transition-timing-function |
设置过渡速度曲线 |
transition-delay |
设置过渡延迟时间 |
animation |
设置动画 |
animation-name |
设置动画名称 |
animation-duration |
设置动画持续时间 |
animation-timing-function |
设置动画速度曲线 |
animation-delay |
设置动画延迟时间 |
animation-iteration-count |
设置动画播放次数 |
animation-direction |
设置动画播放方向 |
animation-fill-mode |
设置动画填充模式 |
animation-play-state |
设置动画播放状态 |
# 变换属性
| 属性 |
说明 |
transform |
应用2D或3D变换 |
transform-origin |
设置变换原点 |
transform-style |
设置子元素是否保留3D位置 |
perspective |
设置3D元素的透视视图 |
perspective-origin |
设置3D元素的底部位置 |
backface-visibility |
设置元素背面是否可见 |
# 其他属性
| 属性 |
说明 |
opacity |
设置透明度 |
visibility |
设置元素可见性 |
cursor |
设置鼠标指针样式 |
clip |
裁剪绝对定位元素 |
clip-path |
使用裁剪方式创建元素显示区域 |
filter |
应用图形效果 |
mix-blend-mode |
设置元素内容如何与父元素和背景混合 |
object-fit |
指定替换元素的内容如何适应容器 |
object-position |
指定替换元素的内容在容器中的位置 |
resize |
设置元素是否可调整大小 |
user-select |
控制用户能否选择文本 |
pointer-events |
控制元素如何响应鼠标事件 |
本文 更新于: 2025-06-05 19:13:12 创建于: 2025-06-05 19:13:12