css 属性小结（功能顺序）

分为动画属性、背景属性、边框属性、颜色属性、高度宽度尺寸大小、Flex弹性盒子、字体属性、列表项属性、边距属性、轮廓属性、文字字体属性、视觉属性等等。

动画属性 (Animation)

animation: 指定基于关键帧的动画。
animation-delay: 指定动画何时开始。
animation-direction: 指定动画是否应在交替的循环中反向播放。
animation-duration: 指定动画完成一个周期应花费的秒数或毫秒数。
animation-fill-mode: 指定CSS动画在执行之前和之后应如何将样式应用于其目标。
animation-iteration-count: 指定在停止之前动画循环应播放的次数。
animation-name: 指定@keyframes应应用于所选元素的已定义动画的名称。
animation-play-state: 指定动画是运行还是暂停。
animation-timing-function: 指定CSS动画在每个周期内应如何进行。

背景属性 (Background)

background: 在一个声明中定义各种背景属性。
background-attachment: 指定背景图像是在视口中固定还是滚动。
background-clip: 指定背景的绘制区域。
background-color: 定义元素的背景色。
background-image: 定义元素的背景图像。
background-origin: 指定背景图像的定位区域。
background-position: 定义背景图像的原点。
background-repeat: 指定是否/如何平铺背景图像。
background-size: 指定背景图像的大小。

边框属性 (Border)

border: 设置元素边框所有四个侧面的宽度，样式和颜色。
border-bottom: 设置元素底部边框的宽度，样式和颜色。
border-bottom-color: 设置元素底部边框的颜色。
border-bottom-left-radius: 定义元素的左下边界角的形状。
border-bottom-right-radius: 定义元素右下边界的形状。
border-bottom-style: 设置元素底部边框的样式。
border-bottom-width: 设置元素底部边框的宽度。
border-color: 设置元素所有四个侧面的边框颜色。
border-image: 指定如何使用图像代替边框样式。
border-image-outset: 指定边框图像区域超出边框超出范围的数量。
border-image-repeat: 指定图像边框应重复，四舍五入还是拉伸。
border-image-slice: 指定图像边框的向内偏移。
border-image-source: 指定要用作边框的图像的位置。
border-image-width: 指定图像边框的宽度。
border-left: 设置元素左边框的宽度，样式和颜色。
border-left-color: 设置元素的左边框的颜色。
border-left-style: 设置元素左边框的样式。
border-left-width: 设置元素左边框的宽度。
border-radius: 定义元素边界角的形状。
border-right: 设置元素右边框的宽度，样式和颜色。
border-right-color: 设置元素右边框的颜色。
border-right-style: 设置元素右边框的样式。
border-right-width: 设置元素右边框的宽度。
border-style: 在元素的所有四个面上设置边框的样式。
border-top: 设置元素顶部边框的宽度，样式和颜色。
border-top-color: 设置元素顶部边框的颜色。
border-top-left-radius: 定义元素左上角的形状。
border-top-right-radius: 定义元素的右上边界角的形状。
border-top-style: 设置元素顶部边框的样式。
border-top-width: 设置元素顶部边框的宽度。
border-width: 设置元素所有四个侧面的边框宽度。

颜色属性 (Color)

color: 指定元素文本的颜色。
opacity: 指定元素的透明度。

尺寸属性 (Size)

height: 指定元素的高度。
max-height: 指定元素的最大高度。
max-width: 指定元素的最大宽度。
min-height: 指定元素的最小高度。
min-width: 指定元素的最小宽度。
width: 指定元素的宽度。

内容属性 (Content)

content: 插入生成的内容。
quotes: 指定嵌入引号的引号。
counter-reset: 创建或重置一个或多个计数器。
counter-increment: 递增一个或多个计数器值。

弹性Flex盒子布局 (Flex)

align-content: 指定伸缩容器中伸缩容器的项目的对齐方式。
align-items: 为flex容器中的项目指定默认对齐方式。
align-self: 指定弹性容器中选定项目的对齐方式。
flex: 指定弹性长度的分量。
flex-basis: 指定弹性项目的初始主要尺寸。
flex-direction: 指定弹性项目的方向。
flex-flow: flex-direction和flex-wrap属性的简写属性。
flex-grow: 指定弹性项目相对于弹性容器内其他项目的增长方式。
flex-shrink: 指定flex项目相对于flex容器内其他项目的收缩方式。
flex-wrap: 指定是否应包装柔性物品。
justify-content: 指定在解决了任何弹性长度和自动页边距之后，弹性项目如何沿弹性容器的主轴对齐。
order: 指定弹性项目在弹性容器中的显示和布局顺序。

字体属性 (Fonts)

font: 在一个声明中定义各种字体属性。
font-family: 定义元素的字体列表。
font-size: 定义文本的字体大小。
font-size-adjust: 发生字体回退时，保留文本的可读性。
font-stretch: 从字体中选择一个普通的，压缩的或扩展的字体。
font-style: 定义文本的字体样式。
font-variant: 指定字体变体。
font-weight: 指定文本的字体粗细。

列表项属性 (Lists)

list-style: 定义列表和列表元素的显示样式。
list-style-image: 指定用作列表项标记的图像。
list-style-position: 指定列表项标记的位置。
list-style-type: 指定列表项的标记样式。

边距属性 (Margin)

margin: 在元素的所有四个面上设置边距。
margin-bottom: 设置元素的底边距。
margin-left: 设置元素的左边距。
margin-right: 设置元素的右边距。
margin-top: 设置元素的上边距。

多列布局属性 (Column)

column-count: 指定多列元素中的列数。
column-fill: 指定如何填充列。
column-gap: 指定多列元素中各列之间的间隔。
column-rule: 指定在多列元素的每一列之间绘制的直线或“规则”。
column-rule-color: 指定在多列布局中的列之间绘制的规则的颜色。
column-rule-style: 指定在多列布局中的列之间绘制的规则的样式。
column-rule-width: 指定在多列布局中的列之间绘制的规则的宽度。
column-span: 指定元素在多列布局中跨越多少列。
column-width: 指定多列元素中列的最佳宽度。
columns: 用于设置column-width和column-count属性的简写属性。

轮廓属性 (Outline)

outline: 设置元素轮廓的所有四个边的宽度，样式和颜色。
outline-color: 设置轮廓的颜色。
outline-offset: 设置轮廓和元素边框之间的空间。
outline-style: 设置轮廓样式。
outline-width: 设置轮廓的宽度。

填充属性 (Padding)

padding: 在元素的所有四个面上设置填充。
padding-bottom: 将填充设置为元素的底侧。
padding-left: 将填充设置为元素的左侧。
padding-right: 将填充设置为元素的右侧。
padding-top: 将填充设置为元素的顶部。

打印属性 (Print)

page-break-after: 在元素之后插入分页符。
page-break-before: 在元素之前插入分页符。
page-break-inside: 在元素内插入分页符。

表属性 (Table)

border-collapse: 指定是连接还是分隔表格单元格边界。
border-spacing: 设置相邻表格单元格的边界之间的间距。
caption-side: 指定表格标题的位置。
empty-cells: 显示或隐藏空表单元格的边框和背景。
table-layout: 指定表布局算法。

文字属性 (Text)

direction: 定义文本方向/书写方向。
tab-size: 指定制表符的长度。
text-align: 设置内联内容的水平对齐方式。
text-align-last: 指定当text-align是justify时如何对齐块的最后一行或强制换行符之前的行。
text-decoration: 指定添加到文本的装饰。
text-decoration-color: 指定text-decoration-line指定的线条样式。
text-decoration-line: 指定将哪种线条装饰添加到元素。
text-decoration-style: 指定text-decoration-line属性指定的线条样式。
text-indent: 缩进文本的第一行。
text-justify: 指定当text-align属性设置为justify时要使用的对正方法。
text-overflow: 指定当文本内容溢出块容器时将如何显示。
text-shadow: 将一个或多个阴影应用于元素的文本内容。
text-transform: 转换文本的大小写。
line-height: 设置文本行之间的高度。
vertical-align: 设置元素相对于当前文本基线的垂直位置。
letter-spacing: 设置字母之间的额外间距。
word-spacing: 设置单词之间的间距。
white-space: 指定如何处理元素内的空白。
word-break: 指定如何在单词内换行。
word-wrap: 指定在内容超出其容器边界时是否中断单词。

转换属性 (Transform)

backface-visibility: 指定当面对用户时，转换后的元素的“背面”是否可见。
perspective: 定义从中查看对象的所有子元素的透视图。
perspective-origin: 定义透视图属性的原点（3D空间的消失点）。
transform: 将2D或3D变换应用于元素。
transform-origin: 定义元素的变换原点。
transform-style: 指定如何在3D空间中渲染嵌套元素。

过渡属性 (Transition)

transition: 定义元素的两种状态之间的过渡。
transition-delay: 指定过渡效果何时开始。
transition-duration: 指定过渡效果要花费的秒数或毫秒数。
transition-property: 指定应将过渡效果应用到的CSS属性的名称。
transition-timing-function: 指定过渡效果的速度曲线。

视觉格式属性

display: 指定元素在屏幕上的显示方式。
position: 指定如何定位元素。
top: 指定所定位元素的上边缘的位置。
right: 指定所定位元素的右边缘的位置。
bottom: 指定所定位元素底边的位置。
left: 指定定位元素左边缘的位置。
float: 指定一个框是否应该浮动。
clear: 指定相对于浮动元素的元素位置。
z-index: 指定定位元素的分层或堆叠顺序。
overflow: 指定对溢出元素框的内容的处理。
overflow-x: 指定当内容超出元素内容区域的宽度时如何管理内容。
overflow-y: 指定当内容超出元素内容区域的高度时如何管理内容。
resize: 指定元素是否可由用户调整大小。
clip: 定义裁剪区域。
visibility: 指定一个元素是否可见。
cursor: 指定游标的类型。
box-shadow: 将一个或多个阴影应用于元素的框。
box-sizing: 更改默认的CSS框模型。