CSS的常用属性速查表

（转载）原文地址：https://juejin.im/post/5e060afd6fb9a0163b12d46d

前言

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

投影

原文地址：https://juejin.im/post/5e060afd6fb9a0163b12d46d

总结

END

image