#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 | 控制元素如何响应鼠标事件 |