前言

要想写出优美的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

常用伪元素：

beforeafter*

全选

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

上下左右的偏移距离

z-index

层叠关系

布局displayblock：块级元素inline：内联元素flex：弹性盒子布局grid：网格布局盒模型width | height

宽高

padding | margin

内外边距

overflowvisible：超出部分可见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）的变形问题

svgclip-path

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

letter-spacing

字母间距

pointer-events

鼠标事件

列表list-style-type

列表的marker样式（通常都设为none）

UIappearance

元素的默认样式（通常都设为none）

box-sizing

盒模型类型

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

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

outline

轮廓

user-select

用户是否能选择文本（通常都设为none）

滚动行为scroll-behaviorauto：默认滚动行为smooth：丝滑滚动行为scroll-snap-type

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

scroll-snap-align

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

变换transform

常见的几何变换：

translate：平移scale：缩放rotate：旋转skew：斜切transform-origin

变换中心

transform-styleflat：默认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

投影

作者：alphardex
链接：