简洁版CSS常用属性合集

1.背景相关属性

属性	用法	属性值
background-color	某个元素的背景色	某种颜色
background-attachment	设置背景图像固定还是移动	fixed（固定），scroll（可滚动，默认）
background-clip	规定背景的绘制区域	padding-box，border-box，content-box
background-image	为元素设置背景图像	none（默认，不显示），url()（指向图像的路径）
background-origin	规定背景图像的定位区域	padding-box，border-box，content-box
background-position	规定背景图像的开始位置	两个像素值，两个百分比值，分别规定水平和垂直位置，或者left，top，center，right，bottom
background-size	设置背景图像的尺寸	两个百分比，像素值，auto，contain，cover，分别控制宽度和高度
background-repeat	设置重复图像	repeat（默认重复），repeat-x（水平重复），repeat-y（垂直重复），no-repeat（不重复），space，round

2.文本相关属性

这些属性都具有继承性

属性	用法	属性值
color	某个元素的文本颜色	某种颜色
font-family	设置字体	常用的字体有serif，sansserif
font-size	设置字符大小	数字值（pt，px，em），百分比，或从xx-smail到xx-large
font-weight	规定字符的粗细	normal，bold，bolder，lighter
font-style	字符样式	normal，italic，oblique
line-height	设置行高	百分比
text-align	规定文本的水平对齐方式	center（居中对齐），justify（两端对齐），left（左对齐），right（右对齐）
text-decoration	文本是否加下划线	超链接通常为none
text-indent	配置文本首行的缩进方式	数值（px，em），百分比，auto
text-shadow	文本的阴影效果	2~4数值（px，em）加颜色值，数值分别指定水平偏移，纵向偏移，模糊半径，扩散距离
text-transform	控制文本的大小写	none（无，默认），capitalize（首字母大写），uppercase（全部大写），lowercase（全部小写）
white-space	规定如何处理元素的空白	normal（默认），nowrap（不换行），pre，pre-line，pre-wrap

3.内容尺寸属性

属性	用法	属性值
width	元素内容的宽度	数值（px，em），百分比，auto（默认）
height	元素内容的高度	数值（px，em），百分比
max-width	设置元素的最大宽度	一个数值（px），百分比
min-width	设置元素的最小宽度	一个数值（px），百分比

4.内边距属性

属性	用法	属性值
padding	某个元素的内边距属性	一个数值（px，em）：设置所有外边距；两个数值：分别设置上下，左右的外边距；三个数值：分别设置上，左右，下的外边距；四个数值：分别设置上，右，下，左四个外边距
padding-top	单独设置上内边距（-left，-right，-bottom同理）	一个数值（px，em），百分比

5.边框属性

属性	用法	属性值
border	设置边框属性	三个值分别指定border-width，border-style，border-color的值
border-top	单独设置上边框属性（-left，-right，-bottom同理）	三个值分别指定border-width，border-style，border-color的值
border-radius	为元素添加圆角边框	一个数值（px，em），百分比
border-top-left-radius	定义左上角的边框形状（其余各角边框形状同理）	一个数值（px，em），百分比
border-color	设置元素边框的颜色	某种颜色
border-style	设置四条边框的样式	double，groove，inset，none（默认），outside，ridge，solid，dashed，dotted，hidden
border-width	设置元素边框线宽	一个数值，百分比
box-shadow	向边框添加阴影	2~4个数值加一个颜色值，分别指定水平偏移，垂直偏移，模糊半径，扩展距离和阴影颜色

6.外边框属性

属性	用法	属性值
margin	某个元素的外边距属性	一个数值（px，em）：设置所有外边距；两个数值：分别设置上下，左右的外边距；三个数值：分别设置上，左右，下的外边距；四个数值：分别设置上，右，下，左四个外边距；auto，消除边距值为0
margin-top	单独设置上外边距（-left，-right，-bottom同理）	一个数值（px，em）百分比，auto

7.特殊视觉效果属性

属性	用法	属性值
linear-gradient	设置颜色的线性混合	-
opacity	定义元素的不透明度	从0到1的一个数值
transform	改变元素的显示	rotate(度)（旋转角度），scale(数值,数值)和scaleX和scaleY（沿X，Y轴缩放元素），skewX和skewY（扭曲元素显示），translate(数值,数值)和translateX和translateY（沿X,Y轴复位元素）
transition	设置过渡效果	四个值分别对应transition-property，transition-duration，transition-timing-function，transition-delay
transition-property	规定要应用过渡效果的css属性名称	css属性名
transition-duration	规定完成过渡需要的时间	一个数值（秒）
transition-timing-function	指定过渡效果的速度	ease（默认，慢快慢），linear（相同速度），ease-in（逐渐加速），ease-out（逐渐减速），ease-in-out（慢速开始慢速结束）
transition-delay	规定过渡效果的延迟	一个数值（秒）

8.浮动属性

属性	用法	属性值
float	设置元素的左右浮动效果	left，right
clear	清除浮动	left，right，both
overflow	常用于去除浮动	visible（内容被显示，过大显示在元素之外），hidden（内容裁剪，部分内容不可见），auto（内容充满，被裁剪会显示滚动条），scroll（内容裁剪，会显示滚动条）

9.列表标记属性

属性	用法	属性值
list-style-type	列表标记样式	none（无），disc（实心圆），circle（空心圆），square（实心方块），decimal（数字），upper-(lower-)alpha（字母），upper-(lower-)roman（罗马字母）
list-style-image	用图片设置列表标记	url(url)
list-style-position	列表标记位置	inside（标记位于文本以内），outside（默认）

10.元素的显示效果

属性	用法	属性值
display	配置元素的显示效果	none（不显示），block（块显示），inline（行内显示），inline-block（与相邻行内元素保存同一行，同时可设置宽高），flex（弹性容器），grid（栅格）

11.css伪类交互

伪类	用法
:link	未被点击过的超链接默认状态
:visited	已访问超链接的默认状态
:focus	超链接有键盘焦点时的状态
:hover	超链接在鼠标指针划过时的状态
:active	超链接被实际点击后的状态
:first-of-type	匹配特定类型的第一个元素
:last-of-type	匹配特定类型的最后一个元素
:nth-of-type(n)	匹配指定类型的第n个元素（数字，odd，even）

12.元素定位属性

属性	用法	属性值
position	指定元素定位类型	static（默认，正常流），fixed（固定，页面滚动时元素不发生移动），relative（相对定位，需使用left，right，top，bottom属性说明相对正常流偏移量），absolute（绝对定位，与第一个非静态父元素的位置关系，需使用left，right，top，bottom属性说明绝对偏移量）

13.弹性属性

属性	用法	属性值
flex-direction	设置弹性项目伸缩方向	row（水平），column（垂直）
flex-wrap	指定弹性项目的换行方式	nowrap（默认，单行显示），wrap（多行模式）
justify-content	弹性容器内空间处理	center（居中），space-between（平均分布）
flex	定制每个弹性元素的大小	flex数字值相加不能超过10
order	配置显示顺序	0（默认），-1（优先），1（滞后）

14.表格相关属性

属性	用法	属性值
border-spacing	指定水平和纵向间距	一个值：同时配置水平和纵向间距；两个值：分别配置水平间距和纵向间距
border-collapse	配置边框区域	separate（默认），collapse（去除多余间距）
vertical-align	指定内容的纵向位置安排	一个数值（px），百分比，baseline（默认）
caption-side	caption位置	top或bottom