前言

一.选择器

二.box-sizing（盒模型）

1.content-box（标准盒模型）

浏览器默认值。设置的width只是content区的宽度，不包含border和padding。

// width为浏览器视窗呈现尺寸，content 为在CSS中设置的元素的 width
width = content + border + padding;

2.border-box（IE（怪异）盒模型）

设置的width是content、padding和border之和的宽度。

// width为在CSS中设置的元素的width
content = width - border - padding;

三.背景/边框

1.边框

• border-radius（圆角）
• box-shadow（盒阴影）
• border-image（边界图片）

2.背景

• background-image（背景图，可设置多张）
• background-size（背景图像的大小，格式：宽 高）:50px/20% 50px/20%
• background-origin（背景图像的位置区域）:content-box/padding-box/border-box

• background-clip（背景剪裁）

四、文字特效

• text-shadow
• box-shadow
• text-overflow
• word-wrap
• word-break

五.2D/3D转换

1.2D

设置transform属性，可选的值如下：

• translate()
• rotate()
• scale()
• skew()
• matrix()

2.3D

设置transform属性，可选的值如下：

• rotateX()
• rotateY()

六.过渡

设置transition属性。

七.动画

• @keyframes
• animation

八.多列布局

• column-count

九.用户界面

• resize（调整尺寸）
• box-sizing（方框大小调整）
• outline-offset（外形修饰）

十.弹性盒子

• flex

十一.多媒体查询

• @media