（转载）原文地址：juejin.cn/post/684490…
前言
要想写出优美的CSS作品，想象力固然很重要，然而基础也是不可忽略的。相信大部分人怕写CSS的原因是被它庞大的基础知识体系给吓到了，在此笔者推荐一个叫freecodecamp的网站，通过闯关的方式来学习前端三剑客，用它入门CSS是最佳的选择！
当你成功地入了门之后，便可以开始探索CSS的全貌了。本文是CSS属性的速查表，配合在线API文档使用即可
属性速查表
以下列出的属性知识点都是笔者用到过的
千万不要被数量吓到，其实常用的也就这些：选择-定位-布局-盒模型-字体-背景-动画-其他
选择器
element
元素本身，p
class
类，p.class
id
id，p#id
child
子元素，ul li
attribute
属性，input[type="checkbox"]
sibling
相邻元素，input ~ label
pseudo class
伪类，button:hover
常用伪类：
-
hover：鼠标悬浮 -
focus：本身获得焦点 -
focus-within：本身及子元素获得焦点 -
nth-child：第n个子元素 -
not：非某元素 -
target：URL的锚点
表单伪类：
-
checked：单/复选框开关on的状态 -
disabled：被禁用的元素 -
valid：表单校验通过时的情况 -
invalid：表单校验不通过时的情况 -
placeholder-shown：有占位符时的情况（也就是用户还未输入时的情况）
pseudo element
伪元素，button::before
常用伪元素：
-
before -
after
全选
定位
position
-
relative：相对定位，元素占据文档位置，可以有偏移
-
absolute：绝对定位，元素不占位置，相对于父元素定位
-
fixed：固定在视窗某一位置
-
sticky：“粘”在视窗某一位置
top | left | bottom | right
上下左右的偏移距离
z-index
层叠关系
布局
display
-
block：块级元素
-
inline：内联元素
-
flex：弹性盒子布局
-
grid：网格布局
盒模型
width | height
宽高
padding | margin
内外边距
overflow
-
visible：超出部分可见
-
hidden：超出部分不可见
字体
font-weight
字体粗细
font-size
字体大小
font-family
字体种类
line-height
字体行高
文本
text-align
文本对齐
text-shadow
文本阴影
text-transform
文本大小写
text-decoration
文本装饰样式
-webkit-text-stroke
文本描边
color
文本颜色
opacity
颜色透明度
white-space
空格处理
背景
background-color
背景颜色
background-image
背景图片
background-size
背景大小
background-position
背景定位
background-repeat
背景是否重复
background-clip
背景裁剪
边框
border-width
边框宽度
border-style
边框样式
border-color
边框颜色
border-radius
边框圆角
box-shadow
阴影
滤镜
filter
作用于元素本身的滤镜
常用滤镜：
-
blur：高斯模糊
-
contrast：对比度
-
drop-shadow：投影
-
greyscale：灰度
-
hue-rotate：色调变换
backdrop-filter
作用于元素背景的滤镜
混合模式
mix-blend-mode
常用混合模式
-
multiply：正片叠底
-
screen：滤色
-
difference：插值
图片
object-fit
处理替换元素（如img）的变形问题
svg
clip-path
裁剪路径，用来裁剪出各种形状
letter-spacing
字母间距
pointer-events
鼠标事件
列表
list-style-type
列表的marker样式（通常都设为none）
UI
appearance
元素的默认样式（通常都设为none）
box-sizing
盒模型类型
-
content-box：默认，标准盒模型
-
border-box：IE盒模型（将
border和·padding一并算作长宽）
cursor
光标类型，最常用的是pointer，也就是一只手
outline
轮廓
user-select
用户是否能选择文本（通常都设为none）
滚动行为
scroll-behavior
-
auto：默认滚动行为
-
smooth：丝滑滚动行为
scroll-snap-type
定义在滚动容器中的一个临时点（snap point）如何被严格的执行
scroll-snap-align
控制将要聚焦的当前滚动子元素在滚动方向上相对于父容器的对齐方式
变换
transform
常见的几何变换：
-
translate：平移 -
scale：缩放 -
rotate：旋转 -
skew：斜切
transform-origin
变换中心
transform-style
-
flat：默认
-
preserve-3d：3d场景
perspective
透视距离
backface-visibility
物体后方是否可视
过渡和动画
transition
过渡
transition-property
过渡属性名
transition-duration
过渡时间
transition-delay
过渡延迟
transition-timing-function
过渡时间函数
animation
动画
animation-name
动画名称
animation-duration
动画时间
animation-delay
动画延迟
animation-timing-function
动画时间函数
animation-iteration-count
动画播放次数
animation-fill-mode
动画填充模式
@keyframes
关键帧
其他
var()
CSS自定义变量
calc()
计算值
@media
媒体查询，用于适配不同设备
-webkit-box-reflect
投影
总结
END
