Html中CSS常用属性

Html中CSS常用属性

一、注释

在style标签中注释的书写使用“/* 注释内容 */”，而不是。

二、文字属性

用于对文字进行修饰的属性，例如：字体大小、使用的字体。常用的的属性为font-style、font-weight、font-size、font-family、font。

2.1、font-style

功能：设置文字样式，即文字是正常显示还是倾斜显示等。
使用格式：font-style: 值;
常用取值：
normal ： 正常的， 默认就是正常的
italic : 倾斜的

2.2、font-weight

功能：设置文字粗细，即文字是正常显示还是加粗显示。
使用格式：font-weight: 值;
常用取值：
bold 加粗
bolder 比加粗还要粗
lighter 细线， 默认就是细线
数字取值：
100-900之间整百的数字

2.3、font-size

功能：设置文字大小，即设置文字大小为多少个像素。
使用格式：font-size: 值;
单位：px（像素 pixel）
注意点： 通过font-size设置大小一定要带单位， 也就是一定要写px

2.4、font-family

功能：设置文字字体，即是使用宋体、黑体还是其他字体。
使用格式：font-family:“字体名称”;
常用取值：“宋体”、“微软雅黑”、“黑体”、“Times New Roman”。
注意点：
1.如果取值是中文， 需要用双引号或者单引号括起来。
2.设置的字体必须是用户电脑里面已经安装的字体。
3.如果设置的字体不存在, 那么系统会使用默认的字体来显示，默认使用宋体
4.如果设置的字体不存在, 而我们又不想用默认的字体来显示，则可以给字体设置备选方案
格式:font-family:“字体1”, “备选方案1”, …;
5.如果想给中文和英文分别单独设置字体, 则字体书写时先设置一个英文字体，然后设置一个或者多个中文字体。
6.但凡是中文字体, 里面都包含了英文，但凡是英文字体, 里面都没有包含中文，即中文字体可以处理英文, 而英文字体不能处理中文， 如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面。
7.字体名称是英文不一定是英文字体，例如：宋体可以写为SimSun、黑体可以写为SimHei、微软雅黑可以写为Microsoft YaHei。

2.5、font

功能：用于对字体样式进行编辑的缩写格式，达到简化代码的目的。
基本使用格式：font: style weight size family;
style：文字样式，用于替换font-style属性。
weight：文字粗细，用于替换font-weight属性。
size：文字大小，用于替换font-size属性。
family：文字字体，用于替换font-family属性。
使用示例：font:italic bold 10px “楷体”;
注意点:
1.在这种缩写格式中有的属性值可以省略，例如：sytle、weight可以省略。
2.在这种缩写格式中style和weight的位置可以交换。
3.在这种缩写格式中有的属性值是不可以省略的，例如：size、family不能省略。
4.size和family的位置是不能顺便乱放的，size一定要写在family的前面, 而且size和family必须写在所有属性的最后。

三、文本属性

用于对整段文本进行修饰的属性，例如：对齐方式、下划线。常用的属性有text-decoration、text-align、text-indent。

3.1、text-decoration

功能：用于设置文本装饰，即给文本添加下划线或者其他样式。
基本使用格式:text-decoration: 值;
取值:
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有, 最常见的用途就是用于去掉超链接的下划线

3.2、text-align

功能：用于设置文本对齐方式。
基本使用格式: text-align: 值;
取值:
left 左
right 右
center 中

3.3、text-indent

功能：用于设置文字缩进宽度。
基本使用格式: text-indent: 值+单位;
取值:
2em, 其中2是缩进数量，em是单位, 一个em代表缩进一个文字的宽度
2px，其中2是缩进数量，px是单位，一个px代表缩进一个像素的宽度

四、color

功能：颜色属性，用于设置文字颜色。
基本使用格式：color: 值;
取值：
1.1英文单词
一般情况下常见的颜色都有对应的英文单词, 但是英文单词能够表达的颜色是有限制的, 也就是说不是所有的颜色都能够通过英文单词来表达
1.2rgb
rgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色)
格式: rgb(0,0,0)
这个格式中的
第一个数字就是用来设置三原色的光源元件红色显示的亮度
第二个数字就是用来设置三原色的光源元件绿色显示的亮度
第三个数字就是用来设置三原色的光源元件蓝色显示的亮度
这其中的每一个数字它的取值是0-255之前, 0代表不发光, 255代表发光, 值越大就越亮
红色: rgb(255,0,0);
绿色: rgb(0,255,0);
蓝色: rgb(0,0,255);
黑色: rgb(0,0,0);
白色: rgb(255,255,255);
在前端开发中其实并不常用黑色
只要让红色/绿色/蓝色的值都一样就是灰色
而且如果这三个值越小那么就越偏黑色, 越大就越偏白色
例如: color: rgb(200,200,200);
1.3rgba
rgba中的rgb和前面讲解的一样, 只不过多了一个a
那么这个a呢代表透明度, 取值是0-1, 取值越小就越透明
例如: color: rgba(255,0,0,0.2);
1.4十六进制
在前端开发中通过十六进制来表示颜色, 其实本质就是RGB
十六进制中是通过每两位表示一个颜色
例如: #FFEE00 FF表示R EE表示G 00表示B
1.5十六进制缩写
在CSS中只要十六进制的颜色每两位的值都是一样的, 那么就可以简写为一位，例如:#FFEE00 == #FE0。一般不推荐这样的写法。
注意点:
1.如果当前颜色对应的两位数字不一样, 那么就不能简写，例如：#123456;
2.如果两位相同的数字不是属于同一个颜色的, 也不能简写，例如：#122334

五、背景属性

功能：用于设置与标签背景相关的内容，使用的属性有background-color、background-image、background-repeat、background-attachment、background-position、background。

5.1、background-color

功能：用于设置标签的背景颜色。
基本使用格式：background-color:值;
取值：
1、具体单词，例如：red、blue、green。
2、rgb取值，例如：rgb(255, 0, 0)。
3、rgba取值，例如：rgba(255, 0, 0, 0.5)。
4、十六进制取值，例如：#ff0000。

5.2、background-image

功能：用于设置背景显示的图片。
基本使用格式：background-image: url();
取值：
1、本机地址，使用相对路径或者绝对路径链接。
2、网络地址，使用该图片的网络路径链接。
注意事项:
1.图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址
2.如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充
3.如果网页上出现了图片, 那么浏览器会再次发送请求获取图片

5.3、background-repeat

功能：当背景图片小于标签大小时控制背景图片的平铺方式。
基本使用格式：background-repeat:值;
取值：
1、repeat 默认, 在水平和垂直都需要平铺
2、no-repeat 在水平和垂直都不需要平铺
3、repeat-x 只在水平方向平铺
4、repeat-y 只在垂直方向平铺
应用场景:可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度

5.4、background-attachment

功能：设置背景图片是否会随着滚动条的滚动而滚动。
基本使用格式：background-attachment: 值;
取值：
1、scroll 默认值， 会随着滚动条的滚动而滚动。
2、fixed 不会随着滚动条的滚动而滚动。

5.5、background-position

功能：用于控制背景图片显示的位置。
基本使用格式：background-position: 水平方向值1 水平方向值2;
取值：
1、具体的方位名词
水平方向: left center right
垂直方向: top center bottom
2、具体的像素值
例如: background-position: 100px 200px;
注意事项：
1、如果使用具体像素值时一定要写单位，即px，否则取值无效。
2、具体的像素值可以是负数。
3、取值坐标系是从左上角开始的。而表示左下角开始的。
4、同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色。

5.6、background

功能：将背景相关的属性值统一书写，即将2.5.1-2.5.5的属性写在一起。
基本使用格式：background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;
注意事项：
1、background属性中， 任何一个属性都可以被省略。
2、background属性值可以调换位置。

5.7、background-size

功能：用于确定背景图片显示大小。
基本使用格式：background-size: 宽度 高度。
取值：
1、数字形式，以px为单位。
2、百分比，以%为单位。
3、auto自动填充。
4、cover：系统图片需要等比拉伸到宽度和高度都填满元素。
5、contain：系统图片需要等比拉伸到宽度或者高度填满元素。

5.8、background-origin

功能：用于定位背景图片开始显示位置。
基本使用格式：background-origin: 值;
取值：
border-box：从边框区域开始显示。
padding-box：从内边距区域开始显示，默认值。
content-box：从内容区域开始显示。

5.9、background-clip

功能：用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景。
基本使用格式：background-clip: 值;
取值：
border-box：从边框区域开始显示。
padding-box：从内边距区域开始显示，默认值。
content-box：从内容区域开始显示。

六、display

功能：设置标签的显示模式。
基本使用格式：display:值;
取值：
block:块级，即设置标签独占一行，可以设置宽度、高度属性。
inline：行内，即设置标签不会独占一行，不能设置宽度、高度属性。
inline-block：行内块级，即设置标签不会独占一行，可以设置宽度、高度属性。

七、边框属性

功能：用于设置边框宽度、颜色、样式的属性。

7.1、border

功能：同时设置四条边框的宽度、样式、颜色。
基本使用格式：border: 边框的宽度 边框的样式 边框的颜色;
取值：
边框宽度取值为像素；
边框样式常用的有solid(实线)、dashed(虚线)；
颜色常用的取值有英文字母、rgb、rgba、十六进制。
注意事项:
1.连写格式中颜色属性可以省略, 省略之后默认就是黑色。
2.连写格式中样式不能省略, 省略之后就看不到边框了。
3.连写格式中宽度可以省略, 省略之后还是可以看到边框。

7.2、设置单独一条边框属性

功能：
border-top：设置上边框的宽度、样式、颜色。
border-right：设置右边框的宽度、样式、颜色。
border-bottom：设置下边框的宽度、样式、颜色。
border-left：设置左边框的宽度、样式、颜色。
基本使用格式：
border-top: 边框的宽度 边框的样式 边框的颜色;
border-right: 边框的宽度 边框的样式 边框的颜色;
border-bottom: 边框的宽度 边框的样式 边框的颜色;
border-left: 边框的宽度 边框的样式 边框的颜色;
取值和注意事项同2.7.1。

7.3、同时设置四条边框某一特定属性

功能：
border-width：同时设置四条边框的宽度。
border-style：同时设置四条边框的样式。
border-color：同时设置四条边框的颜色。
基本使用格式：
border-width: 上 右 下 左;
border-style: 上 右 下 左;
border-color: 上 右 下 左;
取值：
border-width：使用像素进行取值。
border-style：常用的有solid(实线)、dashed(虚线)。
border-color：使用常用的取值有英文字母、rgb、rgba、十六进制等形式。
注意事项：
1.这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右。
2.这三个属性的取值省略时的规律。
2.1上 右 下 左 > 上 右 下 > 左边的取值和右边的一样。
2.2上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样。
2.3上 右 下 左 > 上 > 右下左边取值和上边一样。

7.4、设置指定边框的特定属性。

功能：
border-top-width：设置上边框的宽度。
border-top-style：设置上边框的样式。
border-top-color：设置上边框的颜色。

border-right-width：设置右边框的宽度。
border-right-style：设置右边框的样式。
border-right-color：设置右边框的颜色。

border-bottom-width：设置下边框的宽度。
border-bottom-style：设置下边框的样式。
border-bottom-color：设置下边框的颜色。

border-left-width：设置左边框的宽度。
border-left-style：设置左边框的样式。
border-left-color：设置左边框的颜色。

基本使用格式：
border-top-width：值。
border-top-style：值。
border-top-color：值。

border-right-width：值。
border-right-style：值。
border-right-color：值。

border-bottom-width：值。
border-bottom-style：值。
border-bottom-color：值。

border-left-width：值。
border-left-style：值。
border-left-color：值。
取值：
width：使用像素进行取值。
style：常用的有solid(实线)、dashed(虚线)。
color：使用常用的取值有英文字母、rgb、rgba、十六进制等形式。

7.5、border-radius

功能：设置表框角为圆角。
基本使用格式：border-radius:左上值 右上值 右下值 左下值;
取值：以数字作为值，px作为单位。

八、内边框属性

功能：设置边框与内容之间的距离。

8.1、连写格式

功能：同时四条边框的内边距。
基本使用格式：padding: 上 右 下 左;
取值：使用像素数值作为取值，例如：12px。

8.2、非连写格式

功能：
padding-top：设置上内边距;
padding-right：设置右内边距;
padding-bottom：设置下内边距;
padding-left：设置左内边距;
基本使用格式：
padding-top: 值;
padding-right: 值;
padding-bottom: 值;
padding-left: 值;
取值：使用像素数值作为取值，例如：12px。
注意事项:
1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化。
2.给标签设置内边距之后, 内边距也会有背景颜色。

九、外边距属性

功能：设置标签与标签之间的距离。

9.1、连写格式

功能：同时设置四条外边框的距离。
基本使用格式：margin: 上 右 下 左;
取值：使用像素数值作为取值，例如：12px。

9.2、非连写格式

功能：
margin-top：设置上外边距的距离;
margin-right：设置右外边距的距离;
margin-bottom：设置下外边距的距离;
margin-left：设置左外边距的距离;
基本使用格式：
margin-top: 值;
margin-right: 值;
margin-bottom: 值;
margin-left: 值;
取值：使用像素数值作为取值，例如：12px。如果想要标签水平居中显示取值为：0 auto。
注意事项:
1、外边距的那一部分是没有背景颜色的。
2、外边距不会改变标签的宽度和高度。
3、在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的。
4、在默认布局的情况下外边距在水平方向上外边距会叠加，不会出现合并现象。

十、box-sizing

功能：保证增加padding和border属性值之后, 盒子元素的宽度和高度不变。
基本使用格式：box-sizing: 值;
取值：
content-box：标签宽度、高度会随着padding和border属性值改变而改变，元素的宽高 = 边框 + 内边距 + 内容宽高
border-box：标签宽度、高度不会随着padding和border属性值改变而改变，元素的宽高 = width/height的宽高

十一、清空所有标签内边距和外边距

功能：在网页初始化时清空网页所有标签默认的内边距和外边距。
基本使用格式：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0
}
注意事项：
该语句必须需要放在样式的第一行，作为第一个定义的样式。

十二、float

功能：将标签由标准流排版方式更改为浮动流排版方式。
基本使用格式：float: 值;
取值：
left：左浮动，即左对齐。
right：右浮动，即右对齐。
浮动元素排序规则
1.相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面。
2.不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动。
3.浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定。
4.如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示。
5.如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠。
6.如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边。
7.浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象。
特点:
1.在浮动流中是不区分块级元素/行内元素/行内块级元素的，无论是级元素/行内元素/行内块级元素都可以水平排版。
2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高。
3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像。
注意事项
1.浮动流中没有居中对齐, 也就是没有center这个取值。
2.在浮动流中是不可以使用margin: 0 auto;
3.当前一个标签为浮动流元素，后一个标签是标准流元素时，前一个标签就会盖住后一个标签。
4.一般水平排版使用浮动流排版，垂直排版使用标准流排版。
5.在标准流中内容的高度可以撑起父元素的高度，在浮动流中浮动的元素是不可以撑起父元素的高度的。
当两个父元素中的子元素都设置为浮动模式时，后一个父元素中的子元素会跟在前一父元素的子元素后面，而不会换行，因此需要清除浮动，清除浮动的方式如下：
1.给前面一个父元素设置高度。
2.给后面的盒子添加clear属性。
3.外墙法
步骤：
1、在两个盒子中间添加一个额外的块级元素。
2、给这个额外添加的块级元素设置clear: both;属性。
注意事项:
1、外墙法它可以让第二个盒子使用margin-top属性。
2、外墙法不可以让第一个盒子使用margin-bottom属性。
3、外墙法不能撑起第一个盒子的高度。
4.内墙法
步骤：
1、在第一个盒子中所有子元素最后添加一个额外的块级元素
2、给这个额外添加的块级元素设置clear: both;属性
注意事项:
1、内墙法它可以让第二个盒子使用margin-top属性。
2、内墙法它可以让第一个盒子使用margin-bottom属性。
3、内墙法可以撑起第一个盒子的高度。
5.利用伪元素选择器清除浮动，该方法本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样。
注意点:
IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性。
6.利用overflow属性。

十三、clear

功能：控制元素是否会跟在前面或者后面的浮动元素进行排序。
基本使用格式：clear: 值;
取值：
1.none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)。
2.left: 不要找前面的左浮动元素。
3.right: 不要找前面的右浮动元素。
4.both: 不要找前面的左浮动元素和右浮动元素。
注意事项：
当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效。

十四、overflow

功能：
1、将超出标签范围的内容裁剪掉。
2、清除浮动。
3、可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来。
基本使用格式：overflow: 值;
常用取值：
hidden：设置内容不会超出标签范围。

十五、定位流

功能：按照在指定方向移动指定像素的距离使得标签到达指定位置。常用的定位流分为相对定位、绝对定位、固定定位。

15.1、定位流使用的属性

1、position
功能：用于确定使用哪种定位方式。
取值：
relative：设置标签使用相对定位方式。
absolute：设置标签使用绝对定位方式。
fixed：设置标签使用固定定位方式。
2、方向属性
功能：
top：设置相对于上边框移动距离。
right：设置相对于右边框移动距离。
bottom：设置相对于下边框移动距离。
left：设置相对于左边框移动距离。
基本使用格式：
top: 值;
right: 值;
bottom: 值;
left: 值;
取值：移动距离通常使用像素作为单位。
3、z-index
功能：用于控制定位流元素的覆盖关系的，默认情况下所有的元素都有一个默认的z-index属性, 取值是0。
基本使用格式：z-index: 值;
取值：z-index属性使用数字作为取值。
注意事项：
1.默认情况下定位流的元素会盖住标准流的元素。
2.默认情况下定位流的元素后面编写的会盖住前面编写的。
3.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面。
4.如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面。
5.如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面。

15.2、相对定位

功能：相对定位就是标签相对于自己以前在标准流中的位置来移动。
注意事项：
1.相对定位是不脱离标准流的, 会继续在标准流中占用一份空间。
2.在相对定位中同一个方向上的定位属性只能使用一个。
3.由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素。
4.由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局。

15.3、绝对定位

功能：绝对定位就是标签相对于祖先元素来定位，然后进行位置移动，默认情况下是相对与body标签。
注意事项：
1.绝对定位的元素是脱离标准流的。
2.绝对定位的元素是不区分块级元素/行内元素/行内块级元素。
3.默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点。
4.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点。只要是这个绝对定位元素的祖先元素都可以，定位流是指绝对定位/相对定位/固定定位，定位流中只有静态定位不行。
5.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。
6.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点。
7.一个绝对定位的元素会忽略祖先元素的padding。
8.如果子元素需要使用绝对定位，推荐使用方式为：子元素使用绝对定位、父元素使用绝对定位。
9.1.如何让绝对定位的元素水平居中只需要设置绝对定位元素的left:50%，然后再设置绝对定位元素的 margin-left: -元素宽度的一半px。

15.4、固定定位

功能：固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动。
注意事项:
1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间。
2.固定定位和绝对定位一样不区分行内/块级/行内块级。

十六、transition

功能：设置属性的过渡效果。
过渡三要素
1.必须要有属性发生变化。
2.必须告诉系统哪个属性需要执行过渡效果。
3.必须告诉系统过渡效果持续时长。

16.1、连写格式

功能：一次性设置属性过渡的相关要求。
基本使用格式：transition: 过渡属性 过渡时长 运动速度 延迟时间;
取值：
过渡属性：发生变化了的属性。
过渡时长：以秒或者毫秒作为单位。
运动速度：linear(匀速执行过渡效果)、ease(慢速开始、然后变快，最后慢速执行过渡效果)、ease-in(慢速执行过渡效果)、ease-out(慢速执行过渡效果)、ease-in-out(慢速开始、慢速结束执行过渡效果)。
延迟时间：以秒或者毫秒作为单位。
注意事项：
1.当多个属性需要同时执行过渡效果时用逗号隔开即可。
2.连写的时候可以省略后面的运动速度、延迟时间, 因为只要编写了前面的两个参数就已经满足了过渡的三要素。
3.如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为transition:all 0s;。
4.transition属性是写在执行前效果的选择器中，而不是写在执行效果后选择器中。

16.2、非连写格式

功能：
transition-property: 设置需要过渡的属性。
transition-duration: 设置过渡效果持续时间。
transition-timing-function: 设置过渡效果运动速度。
transition-delay: 设置过渡效果延迟多久出现。
基本使用格式：
transition-property: 值;
transition-duration: 值;
transition-timing-function: 值;
transition-delay: 值;
取值：
transition-property: 发生变化了的属性。
transition-duration: 以秒或者毫秒作为单位。
transition-timing-function: linear(匀速执行过渡效果)、ease(慢速开始、然后变快，最后慢速执行过渡效果)、ease-in(慢速执行过渡效果)、ease-out(慢速执行过渡效果)、ease-in-out(慢速开始、慢速结束执行过渡效果)。
transition-delay: 以秒或者毫秒作为单位。
注意事项：
1.当多个属性需要同时执行过渡效果时用逗号隔开即可。
2.属性是写在执行前效果的选择器中，而不是写在执行效果后选择器中。
3.transition-timing-function和transition-delay是可以省略的。
4.transition-property和transition-duration是必须的。

十七、2D转换属性

17.1、transform: rotate()

功能：控制标签旋转，是以Z轴旋转。
基本使用格式：transform: rotate(值);
取值：以数字作为值，deg作为单位，例如45deg。

17.2、transform-origin

功能：设置标签旋转的中心点。
基本使用格式：transform-origin: 水平中心点值 垂直中心点值;
取值：
1.具体像素，以px作为单位，例如：0px。
2.百分比，例如：50%。
3.特殊关键字，例如：left、right、top、bottom、center。

17.3、transform: translate()

功能：控制标签移动。
基本使用格式：transform: translate(水平方向移动数值, 垂直方向移动数值);
取值：以具体像素作为取值，px为单位，例如：100px。

17.4、transform: scale()

功能：控制标签放大或者缩小。
基本使用格式：transform: scale(水平方向数值, 垂直方向数值)。
取值：为数值为值，1表示正常大小，0-1之间表示缩小，大于1表示放大。如果水平方向和垂直方向的数值一样可以简写为一个数值。

17.5、按照指定坐标轴旋转

功能：
transform: rotateZ()：按照Z轴进行旋转。
transform: rotateX()：按照X轴进行旋转。
transform: rotateY()：按照Y轴进行旋转。
基本使用格式：
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
取值：以数字作为值，deg作为单位，例如45deg。

17.6、perspective

功能：控制标签透视效果，即给标签添加近大远小的效果。注意该属性必须添加在需要透视效果标签的父标签上，否则无效。
基本使用格式：perspective: 值;
取值：以具体像素作为取值，px为单位，例如：100px。

17.7、transform-style

功能：将标签设置为3d样式。
基本使用格式：transform-style: preserve-3d;
注意事项：想看到某个元素的3d效果, 只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可。

17.8、transform属性注意事项：

1.如果需要进行多个转换, 那么用空格隔开。
2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的。

十八、动画模块

功能：给标签添加动画效果。
使用步骤：
1、使用@keyframes给标签制作动画效果。
2、使用animation相关的属性调用@keyframes制作的动画，同时给动画设置显示时间、显示次数等功能。

18.1、@keyframes

功能：给标签制作动画效果。
基本使用格式：
第一种格式
@keyframes 动画效果名称 {
from{
属性: 执行前的值;
…
}
to{
属性: 执行后的值;
…
}
}
第二种格式：
@keyframes 动画效果名称 {
0%{
属性: 值;
}
10%{
属性: 值;
}
…
100%{
属性: 值;
}
}
两种格式的区别：第一种格式只能定义两帧动画效果，第二种格式可以定义多帧动画效果。

18.2、animation-name

功能：用于告诉标签执行那个动画效果。
基本使用格式：animation-name: 动画名称;
取值：由@keyframes定义的动画名称来确定。

18.3、animation-duration

功能：用于确定动画执行时长。
基本使用格式：animation-duration: 时间值;
取值：秒或者毫秒。

18.4、animation-delay

功能：用于确定动画延迟多少时长开始执行。
基本使用格式：animation-delay:时间值；
取值：秒或者毫秒。

18.5、animation-timing-function

功能：用于确定动画执行速度。
基本使用格式：animation-timing-function: 值;
取值：
linear：匀速执行动画效果。
ease：慢速开始、然后变快，最后慢速执行动画效果。
ease-in：慢速执行动画效果。
ease-out：慢速执行动画效果。
ease-in-out：慢速开始、慢速结束执行动画效果。

18.6、animation-iteration-count

功能：用于确定动画执行次数。
基本使用格式：animation-iteration-count: 数值;
取值：
使用数字作为值。
infinite：循环播放不会停止。

18.7、animation-direction

功能：用于确定动画是否由往返效果。
基本使用格式：animation-direction: 值;
取值：
normal：默认的取值, 执行完一次之后回到起点继续执行下一次。
alternate：往返动画, 执行完一次之后往回执行下一次。

18.8、 animation-play-state

功能：用于确定动画是否需要暂停。
基本使用格式： animation-play-state: 值;
取值：
running: 执行动画。
paused: 暂停动画。

18.9、animation-fill-mode

功能：用于确定动画等待、结束时的状态。
基本使用格式：animation-fill-mode: 值;
取值：
none: 不做任何改变，默认值。
forwards: 让元素结束状态保持动画最后一帧的样式。
backwards: 让元素等待状态的时候显示动画第一帧的样式。
both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式。

18.10、animation

功能：动画执行效果的连写格式。
基本使用格式：animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;
简写：animation:动画名称 动画时长;
取值：
动画名称：由@keyframes定义的动画名称来确定。
动画时长：秒或者毫秒。
动画运动速度：
linear：匀速执行动画效果。
ease：慢速开始、然后变快，最后慢速执行动画效果。
ease-in：慢速执行动画效果。
ease-out：慢速执行动画效果。
ease-in-out：慢速开始、慢速结束执行动画效果。
延迟时间：秒或者毫秒。
执行次数：
使用数字作为值。
infinite：循环播放不会停止。
往返动画：
normal：默认的取值, 执行完一次之后回到起点继续执行下一次。
alternate：往返动画, 执行完一次之后往回执行下一次。