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

 

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

 

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我并在后台私信我：前端，即可免费获取。

 

属性速查表

 

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

 

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

 

选择器

 

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