CSS的经常使用属性速查表

（转载）原文地址：http://www.javashuo.com/article/p-athwxmfx-g.html
前言

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

投影

（转载）原文地址：http://www.javashuo.com/article/p-athwxmfx-g.html

END