当你成功地入了门之后，便可以开始探索CSS的全貌了。本文是CSS属性的速查表，合营在线API文档利用即可
我自己是一名从事了多年开拓的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适宜2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
属性速查表以下列出的属性知识点都是笔者用到过的
千万不要被数量吓到，实在常用的也就这些：选择-定位-布局-盒模型-字体-背景-动画-其他
选择器element元素本身，p
class类，p.class
idid，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链接：https://juejin.im/post/5e060afd6fb9a0163b12d46d
