要想写出优美的CSS作品，想象力固然很重要，然而基础也是不可忽略的。相信大部分人怕写CSS的原因是被它庞大的基础知识体系给吓到了，在此笔者推荐一个叫freecodecamp的网站，通过闯关的方式来学习前端三剑客，用它入门CSS是最佳的选择！

当你成功地入了门之后，便可以开始探索CSS的全貌了。本文是CSS属性的速查表，配合在线API文档使用即可

以下列出的属性知识点都是笔者用到过的

千万不要被数量吓到，其实常用的也就这些：选择-定位-布局-盒模型-字体-背景-动画-其他

Selectors

Type

元素本身，p

Class

类，p.class

ID

id，p#id

Descendant

后代，ul li

Attribute

属性，input[type="checkbox"]

Sibling

相邻元素，input ~ label

Univarsal

全选，*

Pseudo-class

伪类，用于选择特定状态下的元素

:hover

鼠标悬浮状态

:focus

元素本身获得焦点

:focus-within

元素本身及子元素获得焦点

:nth-child

第n个子元素

:not

不处于某个状态

:target

URL的锚点

:checked

单/复选框开关on的状态

:disabled

禁用状态

:valid

校验通过状态

:invalid

校验不通过状态

:placeholder-shown

输入框有占位符时的情况（也就是用户还未输入时的情况）

:empty

空标签元素

常用场景：字段缺失、ajax加载数据为空

Pseudo-element

伪元素，在原先的元素基础上插入额外的元素，并且它不充当HTML的标签

::before | ::after

标签的额外2个可绘制的元素

::selection

被用户选中的部分

::placeholder

输入框的占位符文本

Positioning

position

• relative：相对定位，元素占据文档位置，可以有偏移
• absolute：绝对定位，元素不占位置，相对于父元素定位
• fixed：固定在视窗某一位置
• sticky：“粘”在视窗某一位置

top | left | bottom | right

上下左右的偏移距离

z-index

层叠关系

Display

display

• block：块级元素
• inline：内联元素
• flex：弹性盒子布局
• grid：网格布局
• contents：充当遮罩的元素（比如给img套上a并能使其不影响布局）

Box Model

拿水果举例子：果核是content，果肉是padding，果皮是border，外界是margin

width | height

宽高

padding | margin

内外边距

overflow

• visible：超出部分可见
• hidden：超出部分不可见
• scroll：超出部分以滚动条形式显示

Fonts

常用简写：<'font-weight'> || <'font-size'> [ / <'line-height'>] || <'font-family'>

font-weight

字体粗细

font-size

字体大小

font-family

字体种类

line-height

字体行高

Text

text-align

文本对齐

text-overflow

文本超出部分截断

常用片段：

.text-clamp {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

text-shadow

文本阴影

text-transform

文本大小写

text-decoration

文本装饰样式

-webkit-text-stroke

文本描边

white-space

空格处理

• nowrap：使文本永不换行
• pre：保留空格和换行符，但无法自动换行
• pre-wrap：保留空格和换行符，且可以自动换行

Color

color

文本颜色

opacity

颜色透明度

transparent

透明色

currentColor

当前元素color的值

Backgrounds & Borders

背景常用缩写：<'background-image'> || <'background-position'> [/ <'background-size'> <'background-repeat'>]

边框常用缩写：<'border-width'> || <'border-style'> || <'border-color'>

background-color

背景颜色

background-image

背景图片

background-size

背景大小

background-position

背景定位

background-repeat

背景是否重复

background-clip

背景裁剪

border-width

边框宽度

border-style

边框样式

border-color

边框颜色

border-radius

边框圆角

box-shadow

阴影：offset-x | offset-y | blur-radius | spread-radius | color

Images

linear-gradient

线性渐变

常见用途：背景色、模拟光、条纹背景等

radial-gradient

径向渐变

常见用途：背景色、斑点背景、卡片镂空、微粒效果等

conic-gradient

圆锥渐变

常见用途：饼图、各种花纹的实现

object-fit

处理替换元素（如img）的变形问题

Filter

filter

作用于元素本身的滤镜

常用滤镜：

• blur：高斯模糊
• contrast：对比度
• drop-shadow：投影，常用于给不规则形状进行
• greyscale：灰度
• hue-rotate：色调变换

backdrop-filter

作用于元素背景的滤镜

Blending

mix-blend-mode

常用混合模式

• multiply：正片叠底
• screen：滤色
• difference：插值

SVG

clip-path

裁剪路径，用来裁剪出各种形状

mask

蒙版，用于创建镂空效果

letter-spacing

字母间距

pointer-events

鼠标事件（通常都设为none，表示消除对象的鼠标事件）

List

list-style-type

列表的marker样式（通常都设为none，表示消除列表样式）

counter-reset

重置某个计数器为某一值

counter-increment

给某个计数器增加特定的值

UI

appearance

元素的默认样式（通常都设为none，表示消除默认外观）

box-sizing

盒模型类型

• content-box：默认，标准盒模型
• border-box：IE盒模型（将border和·padding一并算作长宽）

cursor

光标类型，最常用的是pointer，也就是一只手

outline

轮廓

user-select

用户是否能选择文本（通常都设为none，表示用户无法选中此文本）

Scroll

scroll-behavior

• auto：默认滚动行为
• smooth：丝滑滚动行为

scroll-snap-type

定义在滚动容器中的一个临时点（snap point）如何被严格的执行

scroll-snap-align

控制将要聚焦的当前滚动子元素在滚动方向上相对于父容器的对齐方式

-webkit-overflow-scrolling

设置为touch可以恢复移动端的弹性滚动

overscroll-behavior

设置为contain可以禁止连锁滚动效果

Writing Modes

writing-mode

定义了文本水平或垂直排布以及在块级元素中文本的行进方向。

这里我们默认是ltr文本（左对齐文本）

• horizontal-tb：从左到右水平流动，是默认值
• vertical-lr：从上到下垂直流动，下一垂直行位于上一行右侧
• vertical-rl：从上到下垂直流动，下一垂直行位于上一行左侧

Transforms

transform

常见的几何变换：

• translate：平移
• scale：缩放
• rotate：旋转
• skew：斜切

transform-origin

变换中心

transform-style

• flat：默认
• preserve-3d：3d场景

perspective

透视距离

backface-visibility

物体后方是否可视

Animation

transition

过渡

transition-property

过渡属性名

transition-duration

过渡时间

transition-delay

过渡延迟

transition-timing-function

过渡缓动函数，内置：ease、linear、ease-in、ease-out、ease-in-out、steps()

自定义缓动函数：cubic-bezier()

animation

动画

animation-name

动画名称

animation-duration

动画时间

animation-delay

动画延迟

animation-timing-function

动画缓动函数

animation-iteration-count

动画播放次数

animation-fill-mode

动画填充模式

animation-play-state

动画播放状态

@keyframes

关键帧

Motion Path

offset-path

路径的定义

offset-distance

对象在路径上的位置

Others

attr()

获取自定义属性的值作为content生成的内容

var()

CSS自定义变量

calc()

计算值

@media

媒体查询，用于适配不同设备

-webkit-box-reflect

投影

percentage

一些数值型单位具有百分比写法，那么这些百分比相对的对象是什么呢？有2种：父元素和自身。

相对父元素：width、height、top、left、margin、padding

相对自身：translateX、translateY