CSS 那么多属性，怎么记啊？

CSS 那些不为人知的属性名，怎么用啊？

废话不多说，这篇文章很长!

一些常见的浏览器私有属性包括：

-webkit-：用于 Safari 和 Chrome 浏览器
-moz-：用于 Firefox 浏览器
-ms-：用于 Internet Explorer 浏览器
-o-：用于 Opera 浏览器

这类属性通常是为了兼容旧版本的浏览器，或者是为了实现某些特定的效果而添加。

在编写 CSS 代码时，应该尽量避免使用浏览器私有属性，因为它们可能会在未来的浏览器版本中被废弃或不再支持。

本文的重点，在另一类，即CSS标准属性！

CSS标准属性，我把它们分成六类：通用属性、动画属性、布局属性、盒子属性、文本属性、背景属性。

通用属性

与属性、规则、控件、插件、模式等非页面元素进行交互的属性

all：将除了 unicode-bidi 与 direction 之外的所有属性重设至其初始值或继承值
accent-color：为某些元素所生成的用户界面控件设置了强调色
appearance：用于设置元素（按钮、输入框、滚动条等）的外观，允许开发者将元素的外观与操作系统的本地控件外观相匹配，从而提高用户体验
forced-color-adjust：指定在强制色彩模式下应如何呈现元素的颜色和背景颜色
orphans：设置一个元素必须在页面底部的可见行的最小数量（用于打印或打印预览）
widows：设置一个元素必须在页面顶部的可见行的最小数量（用于打印或打印预览）
page：用于调用先前使用@page规则定义的页面选择器
page-break-after：被break-after取代
page-break-before：被break-before取代
page-break-inside：被break-inside取代
break-after：指定元素之后是否应发生分页、分列或分区
break-before：指定元素之前是否应发生分页、分列或分区
break-inside：指定元素内部是否应发生分页、分列或分区
print-color-adjust：优化元素在输出设备(打印机)上的外观，浏览器可以根据输出设备的类型和能力，对元素的外观进行任何必要和审慎的调整
overlay：指定在顶层中出现的元素是否实际在顶层中呈现

动画属性

布局动态盒子的属性

transition：是 transition-property、transition-duration、transition-timing-function 和 transition-delay属性的简写
transition-property：指定应用过渡属性的名称
transition-duration：指定过渡动画所需的时间
transition-timing-function：设置过渡在持续时间内如何进行
transition-delay：规定了在过渡效果开始作用之前需要等待的时间
transition-behavior：指定是否为动画行为离散的属性启动过渡
animation：是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的简写
animation-name：指定一个或多个 @keyframes at-rule 的名称，这些 at-rule 描述了要应用于元素的动画
animation-duration：设置动画完成一个动画周期所需的时间
animation-timing-function：设置动画在每个周期的持续时间内如何进行
animation-delay：指定从应用动画到元素开始执行动画之前等待的时间量
animation-iteration-count：设置动画序列在停止前应播放的次数
animation-direction：设置动画是应正向播放、反向播放还是在正向和反向之间交替播放
animation-fill-mode：设置 CSS 动画在执行之前和之后如何将样式应用于其目标
animation-play-state：设置动画是运行还是暂停
animation-composition：指定当多个动画同时影响同一属性时要使用的复合操作（覆盖、追加、累加）
animation-timeline：指定用于控制CSS动画进度的时间轴
animation-range：是animation-range-start、animation-range-end属性的简写
animation-range-start：动画在时间轴上的起始位置
animation-range-end：动画在时间轴上的结束位置
scroll-timeline：是scroll-timeline-name、scroll-timeline-axis属性的简写
scroll-timeline-name：用于定义命名滚动进度时间轴的名称
scroll-timeline-axis：用于指定滚动条方向
view-timeline：是view-timeline-name、view-timeline-axis属性的简写
view-timeline-name：用于定义命名视图进度时间轴的名称
view-timeline-axis：用于指定滚动条方向
view-timeline-inset：指定命名视图进度时间轴开始或结束位置的偏移量
view-transition-name：为所选元素提供一个独特的标识名称，使其参与与根视图过渡不同的视图过渡，如果指定none值，则不参与视图过渡
timeline-scope：用来修改一个具名时间线的范围
offset：是offset-anchor、offset-distance、offset-path、offset-position、offset-rotate属性的简写
offset-anchor：定义框沿偏移路径的锚点
offset-distance：指定沿偏移路径的位置
offset-path：指定元素要遵循的移动路径并定义元素的位置
offset-position：指定偏移路径的初始位置
offset-rotate：根据元素沿偏移路径的偏移距离指定元素的方向

布局属性

布局静态盒子的属性

float：设置浮动
clear：清除浮动
position：指定一个元素在文档中的定位方式
top：定位元素上外边距边界与其包含块下边界之间的偏移
right：定位元素右外边距边界与其包含块下边界之间的偏移
bottom：定位元素下外边距边界与其包含块下边界之间的偏移
left：定位元素左外边距边界与其包含块下边界之间的偏移
inset：是top、right、bottom 和 left 属性的简写
inset-block：是inset-block-end、inset-block-start属性的简写
inset-block-end：定义了元素的逻辑块末偏移，并根据元素的书写模式、行内方向和文本朝向对应至实体偏移
inset-block-start：定义了元素的块首偏移，并根据元素的书写模式、行内方向和文本朝向对应至实体偏移
inset-inline：是inset-inline-end、inset-inline-start属性的简写
inset-inline-end：定义了元素的逻辑行末偏移，并根据元素的书写模式、行内方向和文本朝向对应至实体偏移
inset-inline-start：定义了元素的逻辑行首偏移，并根据元素的书写模式、行内方向和文本朝向对应至实体偏移
z-index：设置定位元素及其后代元素或 flex 项目的 Z 轴顺序
display：设置元素是否被视为块或内联元素以及用于子元素的布局
columns：是column-width和column-count的简写属性
column-count：设置元素的列数
column-width：设置元素的列宽
column-rule：是column-rule-width、column-rule-style 和 column-rule-color的简写属性
column-rule-width：设置在多列布局中被画在两列之间的规则（线条）的宽度
column-rule-style：设置在多列布局中被画在两列之间的规则（线条）的样式
column-rule-color：设置在多列布局中被画在两列之间的规则（线条）的颜色
column-span：设置是否让一个元素跨越所有的列
column-fill：控制元素的内容在分成列时如何平衡
flex：是flex-grow、flex-shrink、flex-basis的简写属性
flex-grow：定义项目的放大比例
flex-shrink：定义了项目的缩小比例
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间
flex-flow：是flex-direction属性和flex-wrap属性的简写形式
flex-direction：决定主轴的方向
flex-wrap：定义如果一条轴线排不下，如何换行
grid：是grid-template-rows、grid-template-columns 、grid-template-areas、grid-auto-rows、grid-auto-columns 和 grid-auto-flow、grid-column-gap和grid-row-gap的简写属性
grid-template：是grid-template-columns、grid-template-rows和grid-template-areas属性的简写
grid-template-columns：定义每一列的列宽
grid-template-rows：定义每一行的行高
grid-template-areas：用于定义区域，一个区域由单个或多个单元格组成
grid-area：指定项目放在哪一个区域，还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end属性的简写
gap：是 row-gap 和 column-gap 属性的简写
row-gap：设置行与行的间隔（行间距）
column-gap：设置列与列的间隔（列间距）
grid-auto-flow：规定容器的子元素放置的顺序
grid-auto-columns：设置浏览器自动创建的多余网格的列宽
grid-auto-rows：设置浏览器自动创建的多余网格的行高
grid-column：是grid-column-start和grid-column-end属性的简写
grid-column-start：项目左边框所在的垂直网格线
grid-column-end：项目右边框所在的垂直网格线
grid-row：是grid-row-start和grid-row-end属性的简写
grid-row-start：项目上边框所在的水平网格线
grid-row-end：项目下边框所在的水平网格线
order：定义项目的排列顺序
place-items：是align-items和justify-items属性的简写
justify-items：设置单元格内容的水平位置（左中右）
align-items：定义项目在交叉轴上如何对齐(flex)；设置单元格内容的垂直位置（上中下）(grid)
place-content：是align-content和justify-content属性的简写
justify-content：定义了项目在主轴上的对齐方式（flex）;整个内容区域在容器里面的水平位置（左中右）(grid)
align-content：定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用（flex）;整个内容区域的垂直位置（上中下）(grid)
place-self：是align-self和justify-self属性的简写
justify-self：设置单元格内容的水平位置（左中右）
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性（flex）;设置单元格内容的垂直位置（上中下）(grid)
justify-tracks：为内联轴中具有 masonry 的网格容器设置砌体轴中的对齐方式
align-tracks：为块轴中具有 masonry 的网格容器设置砌体轴中的对齐方式
masonry-auto-flow：可以修改在CSS网格布局中使用masonry时项目的放置方式

盒子属性

描述盒子的形状、外观、缩放、规模、转换、绘制、内容结构等性质的属性

shape-outside：定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装
shape-margin：用于设定由shape-outside创建的 CSS 形状的外边距
shape-image-threshold：通过设定一个 alpha 通道的界限值来提取shape-outside 值为图像的形状
box-sizing：定义了浏览器应该如何计算一个元素的总宽度和总高度
box-decoration-break：用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现
box-shadow：用于在元素的框架上添加阴影效果
aspect-ratio：为盒子规定了首选纵横比，这个纵横比可以用于计算 auto 尺寸以及其他布局函数
block-size：根据元素的书写模式定义了元素块的横向或纵向尺寸
inline-size：元素的书写模式定义了元素区块的横向或纵向尺寸
clip-path：使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏
filter：将模糊或颜色偏移等图形效果应用于元素，滤镜通常用于调整图像、背景和边框的渲染
mix-blend-mode：描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合
paint-order：指定元素的不同部分（如背景、边框和内容）进行层叠和绘制的顺序，仅影响元素的呈现，不影响元素的布局和定位
perspective：激活元素上的三维空间，以便其子元素可以定位在该空间中。通过使 z 轴上较高的元素（靠近观察者）显得更大，而远离的元素显得更小，从而为场景添加深度感
perspective-origin：指定了观察者的位置，用作 perspective 属性的消失点
pointer-events：用于设置元素是否对鼠标事件做出反应
touch-action：用于指定某个给定的区域是否允许用户操作，以及如何响应用户操作(比如浏览器自带的划动，缩放等)
zoom：设置或检索对象的缩放比例
will-change：告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏
resize：设置元素是否可调整尺寸，以及可调整的方向
visibility：显示或隐藏元素而不更改文档的布局
overflow：是overflow-x、overflow-y属性的简写
overflow-x：当内容溢出块级元素的左右两侧时所显示的内容
overflow-y：当内容溢出块级元素的上下两侧时所显示的内容
overflow-anchor：提供一种退出浏览器滚动锚定行为的方法，该行为会调整滚动位置以最大程度地减少内容偏移
overflow-block：设置了当内容溢出盒的块首和块末侧时所显示的内容
overflow-clip-margin：决定了元素在被剪切之前可以被绘制到其边界外的多远
overflow-inline：设置了当内容溢出盒的行首和行末侧时所显示的内容
overflow-wrap：设置浏览器是否应该在一个本来不能断开的字符串中插入换行符，以防止文本溢出其行向盒
transform：允许你旋转，缩放，倾斜或平移给定元素
transform-origin：设置一个元素变形的原点
transform-style：设置元素的子元素是位于 3D 空间中还是平面中
transform-box：定义了与 transform、transform-origin 这两个属性有关联的布局框
rotate：设置 transform属性的旋转属性
scale：设置transform属性缩放的比例
translate：允许单独声明平移变换，并独立于 transform 属性
contain：允许我们指定特定的 DOM 元素和它的子元素，让它们能够独立于整个 DOM 树结构之外，目的是能够让浏览器有能力只对部分元素进行重绘、重排，而不必每次都针对整个页面
contain-intrinsic-size：是contain-intrinsic-width、contain-intrinsic-height属性的简写
contain-intrinsic-width：定义了元素受尺寸局限时浏览器用于布局的元素宽度
contain-intrinsic-height：定义了元素受尺寸局限时浏览器用于布局的元素高度
contain-intrinsic-block-size：定义了元素受尺寸局限时浏览器用于布局的元素块向尺寸
contain-intrinsic-inline-size：定义了元素受尺寸局限时浏览器用于布局的元素行向尺寸
content-visibility：控制元素是否渲染其内容，以及施加一组强局限，由此允许用户代理有机会在不需要时省略大片的布局和渲染工作
container：是container-name、container-type属性的简写
container-name：给容器元素命名
container-type：用于指定一个元素的容器类型，从而影响其布局和渲染
content：用于在元素的 ::before 和 ::after 伪元素中插入内容
object-fit：指定可替换元素的内容应该如何适应到其使用高度和宽度确定的框
object-position：规定了可替换元素的内容在其内容框中的位置
table-layout：定义了用于布局表格的单元格、行和列的算法
caption-side：将表格的标题放到规定的位置
empty-cells：定义了用户端应该怎么来渲染表格中没有可见内容的单元格的边框和背景
list-style：是list-style-type、list-style-image和list-style-position属性的简写
list-style-type：设置列表元素的 marker（比如圆点、符号、或者自定义计数器样式）
list-style-image：指定一个能用来作为列表元素标记的图片
list-style-position：指定标记框在主体块框中的位置
counter-increment：用于将 CSS 计数器增加给定值
counter-reset：将 CSS 计数器重置为制定值
counter-set：将 CSS 计数器设置为给定值
image-orientation：用来修正某些图片的预设方向
image-rendering：用于设置图像缩放算法
image-resolution：用于指定图像的分辨率或像素密度
width：设置元素的宽度
height：设置元素的高度
max-width：设置元素的最大宽度
max-height：设置元素的最大高度
min-width：设置元素的最小宽度
min-height：设置元素的最小高度
max-block-size：指定元素在与write-mode指定的写入方向相反的方向上的最大尺寸
max-inline-size：根据元素的书写模式定义了元素区块的横向或纵向最大尺寸
min-block-size：指定元素在与write-mode指定的写入方向相反的方向上的最小尺寸
min-inline-size：根据元素的书写模式定义了元素区块的横向或纵向最小尺寸
padding：是padding-top、padding-right、adding-bottom、padding-left属性的简写
padding-top：元素上边距的属性
padding-right：元素右边距的属性
padding-bottom：元素下边距的属性
padding-left：元素左边距的属性
padding-block：是padding-block-end、padding-block-start属性的简写
padding-block-end：定义了元素的逻辑块末内边距，并根据元素的书写模式、行内方向和文本朝向对应至实体内边距
padding-block-start：定义了元素的逻辑块首内边距，并根据元素的书写模式、行内方向和文本朝向对应至实体内边距
padding-inline：是padding-inline-end、padding-inline-start属性的简写
padding-inline-end：定义了元素的逻辑行末内边距，并根据元素的书写模式、行内方向和文本朝向对应至实体内边距
padding-inline-start：定义了元素的逻辑行首内边距，并根据元素的书写模式、行内方向和文本朝向对应至实体内边距
border：是border-width、border-style、border-color属性的简写
border-width：是 border-top-color、border-right-color、border-bottom-color和border-left-color属性的简写
border-style：是border-top-style、border-right-style、border-bottom-style和border-left-style属性的简写
border-color：是border-top-color、border-right-color、border-bottom-color和border-left-color属性的简写
border-top：是border-top-color、border-top-style和border-top-width属性的简写
border-top-color：设置某元素顶部 border的颜色
border-top-style：设置元素上边框的 border样式
border-top-width：设置盒模型的上边框的宽度
border-right：是border-right-color、border-right-style和border-right-width属性的简写
border-right-color：设置某元素右部 border的颜色
border-right-style：设置元素右边框的 border样式
border-right-width：设置盒模型的右边框的宽度
border-bottom：是border-bottom-color、border-bottom-style和border-bottom-width属性的简写
border-bottom-color：设置某元素底部 border的颜色
border-bottom-style：设置元素下边框的 border样式
border-bottom-width：设置盒模型的下边框的宽度
border-left：是border-left-color、border-left-style和border-left-width属性的简写
border-left-color：设置某元素左部 border的颜色
border-left-style：设置元素左边框的 border样式
border-left-width：设置盒模型的左边框的宽度
border-radius：是border-top-left-radius、border-top-right-radius、border-bottom-right-radius和 border-bottom-left-radius属性的简写
border-top-left-radius：设置元素左上角的圆角效果
border-top-right-radius：设置元素右上角的圆角效果
border-bottom-left-radius：设置元素左下角的圆角效果
border-bottom-right-radius：设置元素右下角的圆角效果
border-image：是border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat属性的简写
border-image-source：声明元素的边框图片的资源
border-image-slice：将使用 border-image-source 引用的图像划分为多个区域
border-image-width：指定了边界图像的宽度
border-image-outset：定义边框图像可超出边框盒的大小
border-image-repeat：定义图片如何填充边框
border-inline：是border-inline-color、border-inline-style、border-inline-width属性的简写
border-inline-color：定义了元素的逻辑行向的边框颜色，并根据元素的书写模式、行内方向和文本朝向对应至实体边框颜色
border-inline-style：定义了元素的逻辑行向的边框线型，并根据元素的书写模式、行内方向和文本朝向对应至实体边框线型
border-inline-width：定义了元素的逻辑行向的边框宽度，并根据元素的书写模式、行内方向和文本朝向对应至实体边框宽度
border-inline-start：是border-inline-start-color、border-inline-start-style、border-inline-start-width属性的简写
border-inline-start-color：定义了元素的逻辑行首的边框颜色，并根据元素的书写模式、行内方向和文本朝向对应至实体边框颜色
border-inline-start-style：定义了元素的逻辑行首的边框线型，并根据元素的书写模式、行内方向和文本朝向对应至实体边框线型
border-inline-start-width：定义了元素的逻辑行首的边框宽度，并根据元素的书写模式、行内方向和文本朝向对应至实体边框宽度
border-inline-end：是border-inline-end-color、border-inline-end-style、border-inline-end-width属性的简写
border-inline-end-color：定义了元素的逻辑行末的边框颜色，并根据元素的书写模式、行内方向和文本朝向对应至实体边框颜色
border-inline-end-style：定义了元素的逻辑行末的边框线型，并根据元素的书写模式、行内方向和文本朝向对应至实体边框线型
border-inline-end-width：定义了元素的逻辑行末的边框宽度，并根据元素的书写模式、行内方向和文本朝向对应至实体边框宽度
border-block：是border-block-color、border-block-style、border-block-width属性的简写
border-block-color：定义了元素的逻辑块向的边框颜色，并根据元素的书写模式、行内方向和文本朝向对应至实体边框颜色
border-block-style：定义了元素的逻辑块向的边框线型，并根据元素的书写模式、行内方向和文本朝向对应至实体边框线型
border-block-width：定义了元素的逻辑块向的边框宽度，并根据元素的书写模式、行内方向和文本朝向对应至实体边框宽度
border-block-end：是border-block-end-color、border-block-end-style、border-block-end-width属性的简写
border-block-end-color：定义了元素的逻辑块末的边框颜色，并根据元素的书写模式、行内方向和文本朝向对应至实体边框颜色
border-block-end-style：定义了元素的逻辑块末的边框线型，并根据元素的书写模式、行内方向和文本朝向对应至实体边框线型
border-block-end-width：定义了元素的逻辑块末的边框宽度，并根据元素的书写模式、行内方向和文本朝向对应至实体边框宽度
border-block-start：是border-block-start-color、border-block-start-style、border-block-start-width属性的简写
border-block-start-color：定义了元素的逻辑块首的边框颜色，并根据元素的书写模式、行内方向和文本朝向对应至实体边框颜色
border-block-start-style：定义了元素的逻辑块首的边框线型，并根据元素的书写模式、行内方向和文本朝向对应至实体边框线型
border-block-start-width：定义了元素的逻辑块首的边框宽度，并根据元素的书写模式、行内方向和文本朝向对应至实体边框宽度
border-end-end-radius：定义了元素的逻辑边框半径，并根据元素的书写模式、行内方向和文本朝向对应至实体边框半径
border-end-start-radius：定义了元素的逻辑边框半径，并根据元素的书写模式、行内方向和文本朝向对应至实体边框半径
border-start-end-radius：定义了元素的逻辑边框半径，并根据元素的书写模式、行内方向和文本朝向对应至实体边框半径
border-start-start-radius：定义了元素的逻辑边框半径，并根据元素的书写模式、行内方向和文本朝向对应至实体边框半径
border-spacing：指定相邻单元格边框之间的距离（只适用于边框分离模式）
border-collapse：来决定表格的边框是分开的还是合并的
margin：是margin-top、margin-right、margin-bottom、margin-left属性的简写
margin-top：设置元素的顶部外边距外边距区域
margin-right：设置元素的右部外边距外边距区域
margin-bottom：设置元素的底部外边距外边距区域
margin-left：设置元素的左部外边距外边距区域
margin-block：是margin-block-start、margin-block-end属性的简写
margin-block-end：定义了元素的逻辑块末外边距，并根据元素的书写模式、行内方向和文本朝向对应至实体外边距
margin-block-start：定义了元素的逻辑块首外边距，并根据元素的书写模式、行内方向和文本朝向对应至实体外边距
margin-inline：是margin-inline-start、margin-inline-end属性的简写
margin-inline-end：定义元素的逻辑行末外边距，根据元素的书写模式、行内方向和文本朝向映射为实体外边距
margin-inline-start：定义元素的逻辑行首外边距，根据元素的书写模式、行内方向和文本朝向映射为实体的外边距
margin-trim：设置在容器元素上，可以让子元素（需边缘接触）的margin设置计算值变成0
outline：是outline-style、outline-width和 outline-color属性的简写
outline-style：设置一个元素轮廓的样式
outline-width：设置一个元素的轮廓的厚度
outline-color：设置一个元素轮廓的颜色
outline-offset：设置 outline 与一个元素边缘或边框之间的间隙
mask：是mask-image、mask-mode、mask-repeat、mask-position、mask-clip、mask-origin、mask-size、mask-composite属性的简写
mask-image：设置了用作元素蒙版层的图像
mask-mode：用于定义一个元素的遮罩模式
mask-repeat：指定了掩模图像如何在元素的背景中重复
mask-position：设置元素的蒙版（mask）的位置
mask-clip：指定一个元素的遮罩的裁剪区域
mask-origin：用于定义CSS层叠掩码的起点
mask-size：设置元素的遮罩大小
mask-composite：指定如何将两个图像合成为一个的方法
mask-type：指定使用mask-image属性定义的遮罩图像的类型
mask-border：是mask-border-source、mask-border-slice、mask-border-width、mask-border-outset、mask-border-repeat、mask-border-mode属性的简写
mask-border-source：定义一个元素的掩码边框的源图像
mask-border-slice：定义一个元素的遮罩边框切割
mask-border-width：设置CSS遮罩边框的宽度
mask-border-outset：设置元素的遮罩边框的外部轮廓
mask-border-repeat：定义了遮罩图片是否重复显示多个副本，以及如何重复
mask-border-mode：定义如何在 CSS 遮罩中绘制边框
scroll-behavior：指定在滚动元素时应该如何滚动
scroll-snap-align：将盒子的吸附位置指定为其吸附区域在其吸附容器的吸附口中的对齐方式
scroll-snap-stop：定义了滚动容器是否可“越过”吸附位置
scroll-snap-type：设置了在有滚动容器的情形下吸附至吸附点的严格程度
scroll-margin：是scroll-margin-top、scroll-margin-right、scroll-margin-bottom、scroll-margin-left属性的简写
scroll-margin-top：定义了滚动吸附区域的上外边距
scroll-margin-right：定义了滚动吸附区域的右外边距
scroll-margin-bottom：定义了滚动吸附区域的上外边距
scroll-margin-left：定义了滚动吸附区域的上外边距
scroll-margin-block：是scroll-margin-block-end、scroll-margin-block-start属性的简写
scroll-margin-block-end：定义了滚动吸附区域在的块末外边距，此区域用于将此盒吸附至滚动口
scroll-margin-block-start：定义了滚动吸附区域在的块首外边距，此区域用于将此盒吸附至滚动口
scroll-margin-inline：是scroll-margin-inline-end、scroll-margin-inline-start属性的简写
scroll-margin-inline-end：定义了滚动吸附区域的行末外边距，此区域用于将此盒吸附至滚动口
scroll-margin-inline-start：定义了滚动吸附区域的行首外边距，此区域用于将此盒吸附至滚动口
scroll-padding：是scroll-padding-top、scroll-padding-right、scroll-padding-bottom、scroll-padding-left属性的简写
scroll-padding-top：定义了滚动口的最优视区——用于在用户视野中放置内容的目标区域——的上内边距
scroll-padding-right：定义了滚动口的最优视区——用于在用户视野中放置内容的目标区域——的右内边距
scroll-padding-bottom：定义了滚动口的最优视区——用于在用户视野中放置内容的目标区域——的下内边距
scroll-padding-left：定义了滚动口的最优视区——用于在用户视野中放置内容的目标区域——的左内边距
scroll-padding-block：是scroll-padding-block-end、scroll-padding-block-start属性的简写
scroll-padding-block-end：定义了滚动口的最优视区——用于在用户视野中放置内容的目标区域——的块末内边距
scroll-padding-block-start：定义了滚动口的最优视区——用于在用户视野中放置内容的目标区域——的块首内边距
scroll-padding-inline：是scroll-padding-inline-end、scroll-padding-inline-start属性的简写
scroll-padding-inline-end：定义了滚动口的最优视区——用于在用户视野中放置内容的目标区域——的行末内边距
scroll-padding-inline-start：定义了滚动口的最优视区——用于在用户视野中放置内容的目标区域——的行首内边距
overscroll-behavior：是overscroll-behavior-x和overscroll-behavior-y属性的简写
overscroll-behavior-x：控制当滚动到区域的水平边界时的浏览器行为
overscroll-behavior-y：设置浏览器在到达滚动区域的垂直边界时的行为
overscroll-behavior-block：设置当到达滚动区域的块方向边界时浏览器的行为
overscroll-behavior-inline：设置当到达滚动区域的内联方向边界时浏览器的行为
scrollbar-color：设置滚动条轨道和拇指的颜色
scrollbar-width：设置滚动条的最大宽度
scrollbar-gutter：允许作者为滚动条预留空间，防止随着内容的增长而发生不必要的布局更改，同时也避免在不需要滚动时产生不必要的视觉效果

文本属性

描述文本(包含光标等行内元素)性质的属性

caret-color：定义插入光标的颜色
cursor：设置光标的类型（如果有），在鼠标指针悬停在元素上时显示相应样式
color：设置元素的文本以及文本装饰的前景色颜色值
color-scheme：允许元素指示它可以舒适地呈现哪些颜色方案
direction：设置文本、表格列和水平溢出的方向
unicode-bidi：决定如何处理文档中的双书写方向文本
hanging-punctuation：用于控制标点符号的排列方式，设置在文本块的开始和结束处是否悬挂标点符号，以改善排版效果
hyphenate-character：设置在行尾使用的字符（或字符串）之前的连字符换行符
hyphenate-limit-chars：指定允许连字符的单词的最小字长，以及连字符前后的最小字符数
hyphens：告知浏览器在换行时如何使用连字符连接单词
initial-letter：为下垂、升高和下沉的首字母设置样式
initial-letter-align：指定段落中首字母的对齐方式
letter-spacing：设置文本字符的间距表现
math-depth：描述了数学公式中每个元素相对于该公式的顶层容器的深度
math-shift：指示数学公式中的上标是应进行正常移位还是紧凑移位
math-style：指示数学公式应以正常高度还是紧凑高度呈现
quotes：设置引号的样式
ruby-align：定义了不同ruby元素在基础上的分布
ruby-position：定义ruby元素相对于其基本元素的位置
tab-size：用于自定义制表符的宽度
user-select：用于控制用户是否可以选择文本
white-space：设置如何处理元素内的空白字符
white-space-collapse：控制元素内部的空白折叠方式
word-break：指定了怎样在单词内断行
word-spacing：设置标签、单词之间的空格长度
writing-mode：定义了文本水平或垂直排布以及在块级元素中文本的行进方向
font：是font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写
font-style：允许你选择 font-family 字体下的 italic 或 oblique 样式
font-variant：是font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures和font-variant-east-asian等属性的简写
font-variant-caps：使你可以控制大小写字母特殊字符的使用
font-variant-numeric：控制数字、分数和序号标记的替代字形的使用
font-variant-alternates：控制备用字体的使用，这些替代字体可以通过@font-feature-values中定义的替代名称来引用
font-variant-ligatures：控制着其所应用元素文本的 ligatures 与 contextual forms ，会使文字最终的表现形式更加统一
font-variant-east-asian：用于设置文本的东亚字体变体，它可以控制文本中东亚字符的呈现方式，例如中文、日文和韩文等
font-variant-emoji：用于控制字体是否显示 emoji 表情
font-variant-position：用于控制字体变体的位置和间距
font-weight：指定了字体的粗细程度
font-size：设置字体大小
font-size-adjust：定义字体大小应取决于小写字母，而不是大写字母
font-family：通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体
font-feature-settings：用于控制 OpenType 字体中的高级印刷功能
font-kerning：设置是否使用字体中储存的字距信息
font-language-override：控制在指定的语言中使用特定的字形
font-optical-sizing：用于控制字体在不同大小下的显示效果
font-palette：允许用户代理指定某个字体所包含众多调色板中的其中一个
font-smooth：控制字体渲染时应用的抗锯齿效果
font-stretch：为字体定义一个正常或经过伸缩变形的字体外观，它意味着当有多种字体可供选择时，会为字体选择最适合的大小
font-synthesis：控制浏览器可以合成哪些缺失的字体，粗体或斜体
font-synthesis-position：指定字体合成时是否允许垂直位置调整
font-synthesis-small-caps：用于控制字体是否生成小型大写字母
font-synthesis-style：用于控制字体合成的方式
font-synthesis-weight：控制字体合成时是否应该在缺少粗体字体时合成粗体字体
font-variation-settings：允许您控制字体的轮廓、粗细、高度和其他特征，以实现更好的排版效果
line-break：可以用来处理如何断开带有标点符号的中文、日文或韩文（CJK）文本的行
line-height：设置行高
line-height-step：设置线框高度的步长单位
text-align：设置块元素或者单元格框的行内内容的水平对齐
vertical-align：指定行内元素或表格单元格元素的垂直对齐方式
text-align-last：指定一行或者块中的最后一行在被强制换行之前的对齐规则
text-combine-upright：将字符组合设置为单个字符的空间
text-decoration：是 text-decoration-line、text-decoration-color、text-decoration-style 和 text-decoration-thickness 属性的简写
text-decoration-line：设置元素中的文本的修饰类型
text-decoration-color：设置文本修饰线的颜色
text-decoration-thickness：设置元素中文本所使用的装饰线的笔触厚度
text-decoration-style：设置由 text-decoration-line 设定的线的样式
text-decoration-skip：定义了元素哪些部分的内容需要被文本修饰所跳过
text-decoration-skip-ink：指定当上划线和下划线在字形升行和降行上传递时如何绘制
text-underline-offset：设置文本装饰下划线与其原始位置的偏移距离
text-underline-position：当 text-decoration属性的值设置为 underline 之后，可以用 text-underline-position 属性为其设置下划线的位置
text-emphasis：是text-emphasis-style 和 text-emphasis-color属性的简写
text-emphasis-style：设置强调标记的外观
text-emphasis-color：设置强调标记的颜色
text-emphasis-position：设置绘制强调标记的位置
text-indent：定义一个块元素首行文本内容之前的缩进量
text-justify：定义的是当文本的 text-align 属性被设置为 :justify 时的齐行方法
text-orientation：设定行中字符的方向
text-overflow：确定如何提示用户存在隐藏的溢出内容。其形式可以是裁剪、显示一个省略号（“…”）或显示一个自定义字符串
text-rendering：定义浏览器渲染引擎如何渲染字体，浏览器会在速度、清晰度、几何精度之间进行权衡
text-shadow：为文字添加阴影
text-size-adjust：控制是否在一些手机或平板设备上使用文本溢出算法
text-transform：指定如何将元素的文本大写
text-wrap：控制元素内的文本如何换行

背景属性

描述盒子背景性质的属性

backdrop-filter：为一个元素后面区域添加图形效果（如模糊或颜色偏移），因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明
backface-visibility：指定当元素背面朝向观察者时是否可见
background：是background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size和background-attachment属性的简写
background-clip：设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面
background-color：设置元素的背景色
background-image：设置一个或者多个背景图像
background-origin：指定背景图片的原点位置的背景相对区域，当使用 background-attachment 为 fixed 时，该属性将被忽略不起作用
background-position：为每一个背景图片设置初始位置，这个位置是相对于由 background-origin 定义的位置图层的
background-position-x：设置初始状态时背景图片在水平方向上的位置
background-position-y：设置初始状态时背景图片在垂直方向上的位置
background-repeat：定义背景图像的重复方式
background-size：设置背景图片大小
background-attachment：决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动
background-blend-mode：定义该元素的背景图片，以及背景色如何混合
isolation：定义该元素是否必须创建一个新的层叠上下文
opacity：指定了一个元素的不透明度

CSS属性推荐书写顺序

通用属性
动画属性
布局属性
盒子属性
文本属性
背景属性

个人实践经验，这样开发起来更高效，且方便日后阅读与调试。

CSS属性使用建议

本文只是收集了CSS属性，但是实践才是最快的学习方式，还是得花时间和它们死磕才行。

总结

看似杂乱无章的属性经过整理之后，就没有那么乱了。

整理的目的在于，如果遇到有些场景，我们会有印象，知道哪个属性可以解决问题。

如果有时间，我再把CSS属性的实践，特别是那些不常用的属性详细的整理一下。

CSS 属性分类