CSS API整理复习

1. 选择器（基础选择器、组合选择器、伪元素、伪类）
2. 定位、尺寸
3. 内外边距（margin、padding）
4. 边框
5. 布局
6. 背景、颜色、渐变
7. 字体、文本、文本装饰、书写模式
8. 列表、表格
9. 内容
10. 界面样式
11. 多列
12. 伸缩盒（新、旧）
13. 转换、过渡、动画
14. 裁剪（clip、clip-path）、遮罩（mask）
15. 单位（长度、角度、时间、频率、分辨率、颜色）
16. 函数
17. 媒体查询
18. 私有属性（IE、Firefox、Webkit）
19. 其他

E ： 元素选择器（以DOM元素名称来匹配：具体用法）
.classname ：类选择器（以类名来匹配：具体用法）
#id ：ID选择器（以唯一标识符id属性匹配：具体用法）
* ：通配选择器（可匹配任意类型的DOM元素：具体用法）

（2）组合选择器

A + B ：相邻兄弟选择器（匹配A元素后的兄弟B元素，B元素必须紧跟着A元素：具体用法）
A ~ B ：普通兄弟选择器（匹配A元素后的兄弟B元素，B元素只需在A元素后，不要求紧跟：具体用法）
A > B ：子选择器（匹配A元素内的直接后代B元素，不包含孙辈：具体用法）
A B   ：后代选择器（匹配A元素内的B元素，包含所有匹配的子孙后代：具体用法）

（3）属性选择器

E[attr]        ： 匹配具有attr属性的E元素
E[attr="val"]  ： 匹配具有attr属性，且attr值为“val”的E元素
E[attr~="val"] ： 匹配具有attr属性，且attr值是一个以空格作为分隔的值列表，其中至少一个值为“val”的E元素
E[attr^="val"] ： 匹配具有attr属性，且attr值是以val开头的E元素
E[attr$="val"] ： 匹配具有attr属性，且attr值是以val结尾的E元素
E[attr*="val"] ： 匹配具有attr属性，且attr值包含“value”的E元素
E[attr|="val"] ： 匹配具有attr属性，且attr值是一个以空格为分隔的值列表，其中至少一个值为“val”或至少一个值以“val-”开头的E元素。
具体用法

（3）伪元素

E::after / E:after  ：两个等价，用来创建已选中元素的一个虚拟的最后子元素（行内元素），必须设置content属性：具体用法
E::before / E:before ：两个等价，用来创建已选中元素的一个虚拟的第一个子元素（行内元素），必须设置content属性：具体用法
E::first-letter / E:first-letter ： 匹配已选中元素内的文字的第一行的第一个字母（只作用于块元素）：具体用法
E::selection ： 设置文档被选择时的样式：具体用法
E::first-line / E:first-line ：设置匹配元素内的第一行文字（只作用于块元素）：具体用法
E::placeholder ：设置表单输入框占位符：具体用法

（4）伪类

E:checked ：匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)：具体用法
E:disabled ：匹配页面上任何被禁用的元素：具体用法
E:enabled ：匹配页面上任何启用的元素：具体用法
E:empty ： 匹配没有子元素的元素：具体用法
E:first-child ：匹配父元素的第一个子元素E，E必须是某个元素的子元素：具体用法
E:first-of-type ： 匹配同类型中的第一个兄弟元素E，E必须是某个元素的子元素：具体用法
E:focus ： 匹配一个成为焦点的元素（该元素的onfocus事件发生）：具体用法
E:link  ： 设置超链接a在未被访问状态的样式：具体用法
E:visited：匹配超链接a在其链接地址已被访问过的元素：具体用法
E:active ： 匹配被用户激活的元素（在鼠标点击与释放之间发生的事件）：具体用法
E:hover ： 匹配鼠标悬停在其上面的元素：具体用法
E:last-child ：匹配父元素的最后一个子元素E，E必须是某个元素的子元素：具体用法
E:not(x) ：否定伪类，匹配不符合参数选择器X描述的元素。X不能包含另外一个否定选择器：具体用法
E:nth-child(n) ：匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效：具体用法
E:nth-last-child(n) ：匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效：具体用法
E:nth-last-of-type(n) ：匹配同类型中的倒数第n个同级兄弟元素E:具体用法
E:nth-of-type(n)：匹配同类型中的第n个兄弟元素E：具体用法
E:only-child：匹配父元素仅有的一个子元素E，E元素必须是某个元素的子元素：具体用法
E:only-of-type：匹配代表了任意一个元素，这个元素E没有其他相同类型的兄弟元素：具体用法
E:root：匹配文档树的根元素，即html
E:target：匹配URL中的锚点指向的E元素：具体用法
E:invalid ：当元素的内容无法通过输入的类型设置的验证时匹配
E:valid：当元素的内容通过输入的类型设置的验证时匹配
E:fullscreen：匹配位于全屏状态下的元素
E:lang(en)：匹配lang属性的起始值是en的E元素
E:optional：匹配可选（没有设置“required”）的输入元素：具体用法
E:in-range：匹配输入的值在指定区间内的元素：具体用法
E:out-of-range：匹配输入的值在指定区间外的元素：具体用法
E:read-only：匹配设置 "readonly"（只读） 属性的元素：具体用法
E:read-write：匹配没有设置“readonly”属性的元素：具体用法
E:required： 匹配设置了 "required" 属性的元素：具体用法

//下面的尚未搞清楚
E:left
E:right
E:scope
E:any 
E:default
E:indeterminate

2、定位、尺寸

（1）定位

position：设置元素的定位方式：具体用法
top：设置一个定位元素的上外边距边界与其包含块（父元素）上边界之间的偏移：具体用法
right：设置定位元素右外边距边界与其包含块右边界之间的偏移：具体用法
bottom：设置定位元素下外边距边界与其包含块下边界之间的偏移：具体用法
left：设置定位元素左外边距边界与其包含块左边界之间的偏移：具体用法
z-index：设置一个元素的堆叠顺序，可为负数（只作用于定义了position为非static的元素）：具体用法

（2）尺寸

width：设置元素的宽度：具体用法
min-width：设置元素的最小宽度：具体用法
max-width：设置元素的最大宽度：具体用法
height：设置元素的高度：具体用法
min-height：设置元素的最小高度：具体用法
max-height：设置元素的最大高度：具体用法

3、内外边距（margin、padding）

（1）margin

margin：设置元素周围的空间，也就是给定元素的四个（上右下左）方向的外边距属性（可使用 margin: 0 auto 水平居中）：具体用法
margin-top：设置元素的上边距
margin-right：设置元素的右边距
margin-bottom：设置元素的下边距
margin-left：设置元素的左边距

margin折叠：某些相邻的margin会发生合并：具体用法

（2）padding

padding：设置元素的内边距（元素边框与元素内容之间的空间）：具体用法
padding-top：设置元素的顶部内边距
padding-right：设置元素右边内边距
padding-bottom：设置元素底部内边距
padding-left：设置元素左边内边距

4、边框

border：设置元素的边框（width style color）：具体用法
border-width：设置元素边框的宽度：具体用法  
border-style：设置元素边框的样式：具体用法  
border-color：设置元素边框的颜色：具体用法

单独设置元素上边框  
border-top  
border-top-width  
border-top-style  
border-top-color

单独设置元素的有边框  
border-right  
border-right-width  
border-right-style  
border-right-color

单独设置元素的下边框  
border-bottom  
border-bottom-width  
border-bottom-style  
border-bottom-color

单独设置元素的左边框  
border-left  
border-left-width  
border-left-style  
border-left-color
  
border-radius：设置边框（左上、右上、右下、左下）四个圆角：具体用法   
border-top-left-radius：设置边框左上角的圆角  
border-top-right-radius：设置边框的右上角的圆角  
border-bottom-right-radius：设置边框的右下角的圆角  
border-bottom-left-radius：设置边框的左下角的圆角  

box-shadow：设置阴影（可以设定多组效果，每组参数值以逗号分隔）：具体用法  

border-image：设置边框的图像（属性：source slice width outset repeat）：具体用法  
border-image-source：设置边框的图像路径  
border-image-slice：设置图标边框向内偏移量  
border-image-width：设置图像边框的宽度  
boerder-image-outset：设置图像边框的扩展：具体用法  
border-image-repeat：设置图像边框是否平铺：具体用法

5、布局

display：设置元素渲染出来的盒类型（如何显示）：具体用法
float：设置元素是否及如何浮动：具体用法
clear：用来清除浮动：具体用法
visibility：设置元素是否显示（占的位置依旧存在）：具体用法
overflow：设置元素处理溢出内容的方式：具体用法
overflow-x：设置元素处理横向溢出内容的方式
overflow-y：设置元素处理纵向溢出内容的方式
overflow-wrap：设置当内容溢出时，是否允许换行（和word-wrap一样）：具体用法

相关文章：CSS实现单行、多行文本溢出显示省略号（…）

6、背景、颜色、渐变

（1）背景

background：设置背景（属性：color position size repeat origin clip attachment image）（可设置多个背景，每组属性间用逗号分隔）：具体用法  
background-color：设置背景色  
background-image：设置背景路径（可设置多个背景，每组属性间用逗号分隔）  
background-repeat：设置背景是否平铺及平铺方式：具体用法  
background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动：具体用法  
background-position：设置背景图像的位置：具体用法  
background-origin：设置背景图像的定位区域：具体用法  
background-clip：设置背景图像的绘画区域：具体用法  
background-size：设置背景图像的大小：具体用法

url()：定义背景路径

mix-blend-mode：设置元素与背景如何混合
background-blend-mode：设置元素的背景或背景色如何混合

更多关于background，可看这篇文章：CSS3 Background

更多关于mix-blend-mode和background-blend-mode，可以看这篇文章：瞧瞧CSS3的混合模式

（2）颜色

color：设置文本颜色  
opacity：设置元素的不透明度（0~1）

（3）渐变

linear-gradient()：创建线性渐变：具体用法
radial-gradient()：创建径向渐变：具体用法
repeating-linear-gradient()：创建重复的线性渐变：具体用法
repeating-radial-gradient()：创建重复的径向渐变：具体用法

可看这篇文章：CSS3 Gradient渐变

7、字体、文本、文本装饰、书写模式

（1）字体

font：设置元素的文本特性（style variant weight size lineHeight family）：具体用法
font-style：设置文本字体样式：具体用法
font-variant：设置文本是否为小型的大写字母：具体用法
font-weight：设置文本的字体粗细：具体用法
font-size：设置文本的字体大小：具体用法
font-family：设置文本的字体名称列表：具体用法
font-stretch：设置文字是否横向拉伸变形：具体用法
font-size-adjust：设置字体大小取决于小写字母，而不是大写字母：具体用法

@font-face：设置自定义字体：具体用法

（2）文本

text-transform：设置文本的大小写：具体用法
white-space：设置元素中的空格的处理方式：具体用法
tab-size：设置制表符的长度：具体用法
word-break：设置怎样在单词内断行：具体用法
word-wrap/overflow-wrap：两者等价，设置内容溢出时是否断行：具体用法
text-align：设置行内内容相对它的块父元素的水平对齐方式：具体用法
text-align-last：设置内容最后一行的水平对齐方式：具体用法
text-justify：设置文本怎样对齐及对齐间距：具体用法
word-spacing：设置字与字之间的间距：具体用法
letter-spacing：设置字符间的间距：具体用法
text-indent：设置文本的缩进：具体用法
vertical-align：设置内联元素在行框内的垂直对齐方式：具体用法
line-height：设置文本的行高：具体用法
text-size-adjust：设移动端页面中元素文本的大小调整：具体用法

（3）文本装饰

text-decoration：设置文本的排版（line style color）：具体用法
text-decoration-line：设置文本的排版种类：具体用法
text-decoration-color：设置文本的排版颜色
text-decoration-style：设置文本的排版样式：具体用法
text-underline-position：设置文本的下划线的位置（支持度不高）
text-shadow：设置文本的阴影：具体用法

（4）书写模式

direction：设置文本流的方向：具体用法
unicode-bidi：用于同一个页面里存在从不同方向读进的文本显示：具体用法
writing-mode：设置内容块固有的书写方向：具体用法

8、列表、表格

（1）列表

list-style：设置列表项目的属性（type position image）：具体用法
list-style-image：设置列表项标记的图像：具体用法
list-style-position：设置列表项标记的排列位置：具体用法
list-style-type：设置列表项标记的类型：具体用法

（2）表格

table-layout：设置表格布局算法：具体用法
border-collapse：设置表格的边框是分开还是合并：具体用法
border-spacing：设置相邻单元格边框之间的距离：具体用法
caption-side：设置表格标题的位置：具体用法
empty-cells：设置当表格的单元格内无内容时，是否显示该单元格的边框：具体用法

9、内容

content：用来插入生成内容（一般和:before及:after伪元素配合使用）：具体用法
counter-increment：设置当一个selector发生时计数器增加的值：具体用法
counter-reset：创建或重置一个或多个计数器：具体用法
quotes：设置嵌套引用的引号类型：具体用法

10、界面样式

appearance：设置外观按照本地默认样式（使用时要加前缀）：具体用法
text-overflow：设置当文本溢出时，如何处理：具体用法
outline：设置元素周围的轮廓（width style color）：具体用法
outline-width：设置轮廓的宽度
outline-style：设置轮廓的样式：具体用法
outline-color：设置轮廓的颜色
outline-offset：设置轮廓在border边缘外的偏移：具体用法
cursor：设置鼠标悬浮在元素上的外观：具体用法
zoom：设置元素的缩放比例：具体用法
box-sizing：设置元素的盒模型组成模式：具体用法
resize：设置元素是否允许用户缩放：具体用法
user-select：设置是否允许用户选中文本：具体用法
pointer-events：设置在何时成为鼠标事件的target：具体用法

//下面的兼容性不高，后续添加
ime-mode
nav-index  
nav-up  
nav-right  
nav-down  
nav-left

11、多列

columns：设置列宽和列数（width count）：具体用法
column-width：设置列宽
column-count：设置列数
column-gap：设置列与列之间的间距：具体用法
column-rule：设置列与列之间的边框（width style color）：具体用法
column-rule-width：设置列与列之间的边框宽度
column-rule-style：设置列与列之间的边框样式：具体用法
column-rule-color：设置列与列之间的边框颜色
column-span：设置元素是否横跨所有列：具体用法
column-fill：设置所有列的高度是否统一（以最高为主）：具体用法
column-break-before：设置元素之前是否断行：具体用法
column-break-after：设置元素之后是否断行：具体用法
column-break-inside：设置元素内部是否断行：具体用法

12、伸缩盒（新、旧）

（1）伸缩盒（旧）

box-orient：设置伸缩盒元素的子元素的排列方式：具体用法
box-pack：设置伸缩盒元素的子元素的对齐方式：具体用法
box-align：设置伸缩盒元素的子元素的对齐方式：具体用法
box-flex：设置伸缩盒元素的子元素如何分配剩余空间：具体用法
box-flex-group：设置伸缩盒元素的子元素的所属组：具体用法
box-ordinal-group：设置伸缩盒元素的子元素的显示顺序：具体用法
box-direction：设置伸缩盒元素的子元素的排列顺序是否反转：具体用法
box-lines：设置伸缩盒元素的子元素是否可以换行显示：具体用法

（2）伸缩盒（新）

flex：设置弹性盒元素的子元素如何分配空间（grow shrink basis）：具体用法
flex-grow：设置弹性盒的扩展比率：具体用法
flex-shrink：设置弹性盒的收缩比率：具体用法
flex-basis：设置弹性盒伸缩基准值：具体用法
flex-flow：设置弹性盒元素的子元素排列方式（direction wrap）：具体用法
flex-direction：设置内部元素如何在弹性盒内布局，定义了主轴的方向：具体用法
flex-wrap：设置弹性盒内的子元素是单行或多行，同时横轴的方向决定了新行堆叠方向：具体用法 
align-items：设置子元素在弹性盒的当前行的侧轴（纵轴）方向上的对齐方式：具体用法
justify-content：设置弹性盒子元素在主轴（横轴）方向上的对齐方式：具体用法
align-content：设置弹性盒在侧轴方向上右额外空间时，如何排列每一行：具体用法
align-self：设置子元素在侧轴（纵轴）方向上的对齐方式：具体用法
order：设置弹性盒元素的子元素出现的顺序，可为负数：具体用法

相关文章：Flex布局

13、转换、过渡、动画

（1）转换

transform：设置元素的2D或3D转换：具体用法
transform-origin：设置元素进行转换的位置：具体用法
transform-style：设置嵌套元素是怎样在三维空间中呈现：具体用法
perspective：设置透视效果：具体用法
perspective-origin：设置透视点的位置：具体用法
backface-visibility：设置元素背面面向用户时是否可见：具体用法

相关文章：CSS3 Transform 2D和3D转换

（2）过渡

transition：设置元素变换时的过渡（property duration timing-function delay）：具体用法
transition-property：设置元素中的过渡属性：具体用法
transition-duration：设置元素的过渡持续时间：具体用法
transition-timing-function：设置元素的过渡动画类型：具体用法
transition-delay：设置元素延迟过渡的时间：具体用法

相关文章：CSS3 Transition

（3）动画

animation：设置元素所应用的动画特效（keyframes）：具体用法
animation-name：设置元素所应用的动画名称：具体用法
animation-duration：设置元素动画的持续时间：具体用法
animation-timing-function：设置元素动画的过渡类型：具体用法
animation-delay：设置元素动画的延迟时间：具体用法
animation-iteration-count：设置元素动画的循环次数：具体用法
animation-direction：设置元素动画在循环中是否反向运动：具体用法
animation-play-state：设置元素动画的状态：具体用法
animation-fill-mode：设置当动画不播放时，要应用到元素的样式：具体用法

cubic-bezier()：设置贝塞尔曲线，生成速度曲线（一般和animation使用）

相关文章：CSS3 Animation动画

CSS3的贝塞尔曲线（cubic-bezier）

14、裁剪（clip、clip-path）、遮罩（mask）

（1）裁剪

clip：设置元素的可视区域，区域外的部分是透明的：具体用法
clip-path：设置元素的可视区域。

相关文章：clip 和 clip-path

（2）遮罩

//熟悉了解中

15、单位（长度、角度、时间、频率、分辨率）

（1）长度

em：相对于当前对象内文本的字体尺寸
ex：相对于字符“x”的高度，通常为字体高度的一半
ch：数字“0”的宽度
rem：相对于根元素（html元素）font-size计算值的倍数

vw：相对于视口的宽度，视口宽度的 1/100。
vh：相对于视口的高度，视口高度的1/100
vmax：相对于视口的宽度或高度，取宽度与高度之间的最大值。
vmin：相对于视口的宽度或高度，取宽度与高度之间的最小值。

cm：里面
mm：毫米
q：1/4毫米
in：英寸
pt：点
pc：派卡
px：像素
具体用法

（2）角度值

deg：度
grad：梯度
rad：弧度
turn：转、圈

（3）时间值

s：秒
ms：毫秒

（4）频率值

Hz：赫兹
kHz：千赫兹

（5）分辨率

dpi：每英寸包含点的数量
dpcm：每厘米包含点的数量
dppx：每像素包含点的数量

（6）颜色值

color name：颜色名称
HEX：十六进制记法
RGB：rgb记法
RGBA：rgba记法
HSL：hsl记法
HSLA：hsla记法
transparent：全透明
currentColor：当前颜色

16、函数

calc()：用于动态计算长度值（+、-、*、/）：具体用法
attr()：返回属性值：具体用法

image()：设置图像：具体用法
image-set()：设置根据用户设备的分辨率匹配合适的图像：具体用法

17、媒体查询

width：定义输出设备中的页面可见区域宽度：具体用法
height：定义输出设备中的页面可见区域高度：具体用法
device-width：定义输出设备的屏幕可见宽度：具体用法
device-height：定义输出设备的屏幕可见高度：具体用法
orientation：定义输出设备中的页面可见区域高度是否大于或等于宽度：具体用法
aspect-ratio：定义输出设备中的页面可见区域宽度与高度的比率：具体用法
device-aspect-ratio：定义输出设备的屏幕可见宽度与高度的比率：具体用法
color：定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0：具体用法
color-index：定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0：具体用法
monochrome：定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0：具体用法
resolution：定义设备的分辨率：具体用法
scan：定义电视类设备的扫描工序：具体用法
grid：用来查询输出设备是否使用栅格或点阵：具体用法

相关文章：媒体查询（Media Queries）

18、私有属性（IE、Firefox、Webkit）

（1）IE

scrollbar-3dlight-color
scrollbar-darkshadow-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-arrow-color
scrollbar-face-color
scrollbar-track-color
scrollbar-base-color
filter
behavior

（2）Firefox

borer-colors
border-top-colors
border-right-colors
border-bottom-colors
border-left-colors

element()

（3）Webkit

text-fill-color
text-stroke
text-stroke-width
text-stroke-color
box-reflect
tap-highlight-color
user-darg

19、其他

will-change：允许开发者提前告知浏览器要对元素做什么动画，这样浏览器可以提前准备合适的优化设置：具体用法
touch-action：设置某个给定的区域是否允许用户操作，以及如何响应用户操作：具体用法
box-reflect：设置元素的倒影
filter：设置滤镜：具体用法

initial：如果你想重置某个属性为UA默认设置，那么就可以使用该值
inherit：继承父元素的属性
unset：一个属性定义了unset值，如果该属性是默认继承属性，该值等同于inherit，如果该属性是非继承属性，该值等同于initial

相关文章：用CSS3来制作倒影（box-reflect）

CSS3 滤镜

如有错误，欢迎指正！

参考资料：

CSS参考手册

MDN CSS参考