目录

HTML

常用标签

图片标签的必须属性与非必须属性

音频标签的必须属性与非必须属性

视频标签的必须属性与非必须属性

列表

表格

诠释标签作用

表格的结构标签

标签

合并单元格

合并单元格步骤

表单

标签名

label标签的写法

input标签的type属性

button标签的type属性值

字符实体

实现下拉菜单功能

文本域

CSS

盒子

选择器：

基础选择器

复合选择器

结构伪类选择器：

nth-child(公式)

超链接标签a的四个状态

伪元素选择器：

文字控制属性名

字体粗细（font-weight）的属性值：

行高的组成：

修饰线（text-decoration）的属性值：

颜色（color）的属性值：

字体倾斜（font-style）的属性值：

CSS的三大属性

优先级的叠加计算规则

背景属性名

背景图（bgi）属性值

背景图平铺方式（bgr）属性值

背景图位置（bgp）属性值

坐标

关键字

注

背景图缩放（bgz、bgs）的属性值

背景图固定（bga）的属性值

背景的复合属性（bg）

转换显示模式

了解

默认情况下是块级的标签

默认情况下是行内的标签

默认情况下是行内块的标签

盒子模型：

内边距属性写法

边框线（bd）的属性值

设置单方向边框线

外边框（margin）的属性值

解决盒子被撑大问题

清楚默认样式

盒子问题

元素溢出：

外边距问题--合并与塌陷

行内元素--垂直内外边距

盒子模型常用属性

圆角属性值

阴影属性值：

浮动（float）：

清除浮动

flex布局（主流）

flex布局属性名

主轴对齐方式（justify-content）属性值

行对齐方式（align-content）属性值

侧轴对齐方式（align-items、align-self）属性值

修改主轴方向（flex-direction）属性值

弹性伸缩比（flex）属性值

定位

定位居中的实现

调整定位盒子的层级显示顺序

修饰属性

垂直对齐方式（vertical-align）的属性值

诠释过渡效果（transition）

光标类型（cursor）的属性值

---

HTML

常用标签

标签名	效果
h1~h6	标题标签
align	改变文本位置（靠左、靠右、居中）
p	段落标签（独占一行）
br	换行
hr	水平线
strong、b	字体加粗
em、i	字体倾斜
ins、u	字体下划线
del、s	字体删除线
img	导入图片
a	超链接
audio	导入音频
video	导入视频

备注：

双标签：成对出行的标签

单标签：只有开始标签，没有结束标签

图片标签的必须属性与非必须属性

	属性名	作用	说明
必须属性	src	导入图片的URL	src用于指定图像的位置和名称
非必须属性	alt	提示文本	鼠标悬停在图片上面的时候显示的文字
	width	图片的宽度	值为数字，没有单位
	height	图片的高度	值为数组，没有说明

备注：URL（统一资源定位器）是指图像的位置和名称

音频标签的必须属性与非必须属性

	属性名	作用	说明
必须属性	src	导入音频的URL	支持格式：MP3、Ogg、Wav
非必须属性	controls	显示音频控制面板
	loop	循环播放
	autoplay	自动播放	为了提升用户体验，浏览器支持禁用此功能

视频标签的必须属性与非必须属性

	属性名	作用	说明
必须属性	src	导入视频URL	支持MP4、WebM、Ogg格式
非必须属性	controls	显示视频控制面板
	loop	循环播放
	muted	静音播放
	autoplay	自动播放	为了提升用户体验，浏览器支持在静音状态下自动播放

列表

	标签	作用场景	注意事项
无序列表	ul嵌套li，ul是无序列表，li是列表条目	作用于布局排列整齐的不需要规定顺序的区域	ul标签里面只能包含li标签；li标签可以包含任何内容
有序列表	ol嵌套li，ol是有序列表，li是列表条目	作用于布局排列整齐的需要规定顺序的区域	ol标签里面只能包裹li标签；li标签可以包裹任何内容
定义列表	dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情	一般作用于网页底部	dl里面只能包含dt和dd；dt和dd里面可以包含任何内容

备注：无序列表li内容前面有小圆点

表格

标签：table嵌套tr，tr嵌套td/th

标签	使用场景	书写方式	特点
table嵌套tr，tr嵌套td/th	网页中的表格与Excel表格类似，用来展示数据	先写行（先有行），再写单元格	会根据内容的大小来缩放表格

诠释标签作用

标签名	说明
table	整个表格
tr	行（有几行就写几个tr）
th	表头单元格（字体要比td粗一些）
td	内容单元格

备注：

在网页中表格默认没有边框线，再table中使用border属性可以为表格添加边框线（border="1"表示要1像素的边框线）

tr中嵌套tr不会写入表格中

表格的结构标签

作用：把内容划分区域，让表格结构、语义更清晰

标签

标签名	含义	说明
thead	表格头部	包含住表格头部内容区域的结构
tbody	表格主体	包含住主要内容区域的结构
tfoot	表格底部	包含住汇总信息区域的结构

备注：此三类标签是写给浏览器看的，浏览器不显示（人眼无法在浏览器上看到效果）

合并单元格

作用	将多个单元格合并成一个单元格，以合并相同信息
类型	跨行合并、跨列合并

合并单元格步骤

steps one	明确合并目标
steps two	保留最左、最上的表格，添加属性（取值是数字，表示需要合并的单元格数量）；跨行合并，保留最上单元格，添加属性rowspan；跨列合并，保留最左单元格，添加属性colspan
steps three	删除其他单元格

备注：所用的操作都必须在自己结构里面操作，不可以跨结构操作

表单

作用	收集用户信息
使用场景	登录页面、注册页面、搜索区域

标签名

有语义的布局标签

标签名	说明
input	根据type属性值不同，实现不同功能
label	作用于网页中，某个标签的说明文本；用label标签绑定文字和表单控件的关系，增大表单控件的点击范围
button（按钮）	实现按钮功能

备注：支持label标签的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等

无语义的布局标签

标签名	作用	效果
div（大盒子）	布局网页（划分网页区域，摆放内容）	独占一整行
span（小盒子）	布局网页（划分网页区域，摆放内容）	不换行

label标签的写法

ways one	label标签只包裹内容，不包裹表单控件；设置label标签的for属性值与表单控件的id属性值相同即可实现label功能
ways tow（推荐）	使用label标签包裹文字和表单控制（例：input）属性，不需要添加属性

input标签的type属性

type属性值	说明
text	文本框，用于输入单行文本
password	密码框
radio	单选框
checkbox	多选框
file	上传文件

备注：

text、password与placeholder的配合使用：

实现提示信息功能：占位文本属性“placeholder="提示信息"”

radio与name、checked的配合使用：

属性名	作用	特殊说明
name	控制名称	控件分组，同组只能选中一个（即单选功能）
checked	刷新页面时默认选中	属性名与属性值相同，可以简写成一个单词

同理，checkbox也可以与checked配合使用，实现默认效果

file与multiple的配合使用：

实现上传多个文件的效果

button标签的type属性值

type属性值	说明
submit	提交按钮，点击后可以提交数据到后台（默认功能）
reset	重置按钮，点击后将表单控件恢复默认值
button	普通按钮，默认没有功能，一般配合JavaScript使用

备注：reset属性只能重置form属性管理的表单（可实现按钮重置表单控件）

字符实体

作用：在网页中显示预留字符

显示效果	实体名称
空格	&nbsp
<	&lt(&LT)
>	&gt

实现下拉菜单功能

标签：select嵌套option

诠释：

标签名	功能
select	下拉菜单整体
option	下拉菜单的内容每一项
selected（属性名）	刷新页面时实现默认选中的功能

备注：想要实现哪个下拉菜单选项为默认值就在哪个option标签中加selected属性

文本域

标签名	作用	作用场景
textarea	多行输入文本的表单控件	类似于发朋友圈、评论框之类

CSS

盒子

div大盒子、span小盒子

属性名	作用
width	宽度
height	高度
background-color	背景色

选择器：

基础选择器

名称	说明	格式
标签选择器	选中同名标签设置相同样式	标签名：p{样式}、img{样式}……
类选择器	查找标签，差异化设置标签显示效果	定义：.类名{样式}；使用：class="类名（注：没有点）"
id选择器	查找标签，差异化设置标签显示效果，多有javaScript使用	#名字（id名）；注：同一个id选择器在一个页面只能使用一次
通配符选择器	查找页面所以标签，设置相同样式	*{设置的样式}

复合选择器

名称	用法描述	语法	注意事项
后代选择器	选择元素的后代元素	父选 子选{CSS属性}（父子间空格隔开）	后代选择器选中所以后代
子代选择器	选中某元素的最近子代元素（最近子级）	父>子{CSS属性}（父子间用>隔开）
并集选择器	选中多组标签设置相同属性	选择器1，选择器2……选择器n{CSS属性}（用逗号隔开）
交集选择器	选中同时满足多个条件的元素	选择器1选择器2{CSS属性}（选择器之间连写，没有任何符号）	如果交集选择器中有标签选择器，标签选择器必须写在最前面
伪类选择器	"伪类"表示元素的状态，选中元素的某个状态设置样式	选择器：hover{CSS属性}（鼠标悬停状态）	任何标签都可以设置鼠标悬停状态

结构伪类选择器：

作用：根据元素的结构关系查找元素

经验：查找到的元素后可以加上{属性}和其他选择器一样可以往{}中添加属性

选择器	说明
X：first-child	查找第一个X元素
X：last-child	查找最后一个X元素
X：nth-child（n）	查找第n个X元素（第一个元素n为1）

nth-child(公式)

注：

用于ul标签较多

必须是n才可以，其他变量没作用

对于公式n+5/n-5而言：n是从0开始计算（不会覆盖first-child/last-child）

公式	功能
2n	偶数标签
2n+1；2n-1	奇数标签
5n	找到5的倍数的标签
n+5	找到第五个以后的标签
-n+5	找到第5个以前的标签

超链接标签a的四个状态

选择器	作用
：link	访问前
：visited	访问后
：hover	鼠标悬停时
：active	点击时（激活）

备注：要使用这四个顺序要按照link、visited、hover、active的顺序书写。

伪元素选择器：

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容

注意：

必须设置content：" "属性用来设置伪元素的内容（内容可留空）

伪元素默认是行内显示模式

权重和标签选择器相同

选择器	说明
X::before	在X元素里面最前面添加一个伪元素
X::after	在X元素里面最后面添加一个伪元素

文字控制属性名

其写在选择器中

描述	属性名	效果
字体大小	font-size	文字尺寸（用px单位；且必须有单位，否则不生效）
文字粗细	font-weight	400px不加粗，700px加粗
行高	line-height	一般用于控制盒子内的文字
字体族	font-family	控制文字的字体形式
字体复合属性	font	复合属性
文本缩进	text-indent	显示自然段的开头两个空格效果
文本对齐	text-align	left（左）right（右）center（居中）
修饰线	text-decoration	+属性下滑线、删除线、顶格线等修饰线
颜色	color
字体倾斜	font-style	有些字体默认为倾斜 效果

字体粗细（font-weight）的属性值：

	正常	加粗
关键字	normal	bold
数字（开发使用）	400px	700px

行高的组成：

行高=上间距+文本高度+下间距

修饰线（text-decoration）的属性值：

属性值	效果
none	无
underline	下划线
line-through	删除线
overline	上划线（顶格线）

颜色（color）的属性值：

颜色的表达方式	属性值	说明	使用场景
颜色关键字	颜色对于的单词	red、green、blue……	学习测试
rgb	rgb（r，g，b）	表示红绿蓝三原色，取值：0~255
rgba	rgb（r，g，b，a）	a表示透明度，取值：0~1	开发使用，实现透明色
十六进制	#RRGGBB	可以简写：相同两个字母可以写一个	开发使用（可以用Pxcook测量）

字体倾斜（font-style）的属性值：

属性值	效果
normal	正常
italic	倾斜

CSS的三大属性

特性	特点	诠释特点
继承性	子级默认继承父级的文字控制属性，当标签有自己的样式时不会继承父类，会执行自己的样式
层叠性	覆盖（不同选择器中，哪个选择器优先级高就生效哪个选择器）、叠加	相同的属性会覆盖：后来者居上（程序至上而下运行）即后面的属性会覆盖前面的属性
优先级	选择器优先级高的样式生效	权重的高低：通配符选择器<标签选择器=伪类选择器<类选择器<id选择器<行内样式选择器<!important

备注：!important是提高优先级的作用，想要哪个选择器生效，就加到哪个选择器的属性后

优先级的叠加计算规则

叠加计算	公式	规则
如果是复合选择器，则需要权重叠加计算	（行内样式，id选择器个数，类选择器个数，标签选择器个数）	公式中从左向右依次比较选择器个数，同一级个数多的优先级高，如果个数相同，则向后比较

备注：

!important权重最高，继承权重最低

要是是继承父类，即使父类属性有!important，其权重也是最低的

背景属性名

描述	属性名
背景色	background-color
背景图	background-image
背景图平铺方式	background-repeat
背景图位置	background-position
背景图缩放	background-size
背景图固定	background-attachment
背景图复合属性	background

背景图（bgi）属性值

url（图片路劲）；背景图一般都是在盒子里面写的，所以要先写好盒子的宽高

背景图平铺方式（bgr）属性值

属性值	效果
no-repeat	不平铺（图片出现在左上角）
repeat	平铺（默认效果）
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

背景图位置（bgp）属性值

坐标

水平方向位置 垂直方向位置（像素单位px，正负代表方向）

关键字

关键字	位置
left	左侧
right	右侧
center	居中
top	顶部
bottom	底部

注

关键字取值方式可以颠倒取值顺序

只取一个关键字时，另一个方向默认居中；只取一个数字值时表示水平方向，垂直方向默认居中

数字与关键字可以混用

背景图缩放（bgz、bgs）的属性值

方式	属性值	效果
关键字	cover	等比例缩放图片以覆盖背景区（可能会导致图片溢出）；即覆盖整个盒子
	contain	等比例缩放图片当图片的宽或高与盒子的宽或高相等时停止缩放，可能会导致盒子有露白
百分比	根据盒子尺寸计算图片大小	比较好用
数字+单位

背景图固定（bga）的属性值

作用：背景图不会随着元素的内容（盒子）滚动。（盒子可以动，图片（被钉住了）不动）

属性值：fixed

背景的复合属性（bg）

属性值：背景色 背景图 背景图平铺方式 背景图位置 /背景图缩放 背景图固定（空格隔开，不分顺序）

背景图的缩放要在前面加"/"符号

转换显示模式

属性名：display

属性值：

属性值	效果
block	块级
inline-block	行内块
inline	行内

显示模式备注：

显示模式类型	特点
块级元素	独占一行；宽度默认是父级的100%；添加宽高属性生效
行内元素	一行可以显示多个；设置宽高属性不生效；宽高尺寸由内容撑开
行内块元素	一行可以显示多个；设置宽高属性生效；宽高尺寸由内容撑开

了解

默认情况下是块级的标签

标签名	作用
div	用于组织内容
h	标题
p	段落
hr	水平线
ol	有序列表
ul	无序列表
li	列表项
dl	定义列表
dt	定义列表中的术语
dd	定义列表中的描述
pre	用于预格式化的文本
blockquote	引用
article	独立的内容块
figure	用于自包含的内容，通常与<figcaption>一起使用
figcaption	用于<figure>元素的标题
section	用于文档中的一个区段
nav	导航连接
aside	用于页面的侧边栏内容
footer	用于文档或区段的脚注
header	文档或区段的头部
form	用于表单
table	用于表格
thead	表格头部
tbody	表格主体
tfoot	表格脚注
tr	表格的行
th	表格的表头单元格
td	表格的单元格

默认情况下是行内的标签

标签名	作用
a	超链接
span	文本的分组，没有语义意义
br	换行
i	斜体文本
b	加粗文本
u	下划线文本
sub	下标文本
sup	上标文本
em	强调文本（效果与i相同）
strong	强烈强调文本（效果与b相同）
mark	标记文本
small	小号文本
del	删除线
ins	插入文本（它本身并不直接提供下划线的效果，但浏览器通常会给 <ins> 标签添加一个文本下划线）
q	短的引用
time	时间和日期
var	变量
cite	引用作品标签
code	代码文本
samp	计算机输出
kbd	键盘输入
dfn	定义一个术语
abbr	用于缩写
data	表示数据值
progress	显示任务进度
meter	表示度量或已知范围值
wbr	用于文本中可能用于需要换行的地方提供断字

默认情况下是行内块的标签

标签名	作用
input	输入数据
img	嵌入图片
buttom	可点击的按钮
select	下拉选择框
textarea	多行文本输入
label	为表单元素定义标签
video	嵌入视频
audio	嵌入音频
canvas	绘制图形
iframe	嵌入另一个文档

盒子模型：

盒子模型的重要组成部分：

组成	标签名
内容区域	width&&height
内边距	padding（出现在内容与盒子边缘之间）（会撑大盒子）
边框线	border（会撑大盒子）
外边距	margin（出现在盒子的外面）（可用于拉开两盒子距离）

内边距属性写法

属性值：px

padding/padding-方位名词（top、left、bottom、right）

padding多值写法：

上方初值，顺时针取值，对位取值

取值个数	示例	含义
一个值	padding:1px；	四个方向内边距都为1px
四个值	padding:1px 2px 3px 4px	上：1px；右：2px；下：3px；左：4px
三个值	padding:1px 2px 3px	上：1px；左右:2px；下3px
两个值	padding:1px 2px	上下：1px；左右:2px

边框线（bd）的属性值

属性值	线条样式
solid	实线
dashed	虚线
dotted	点线

设置单方向边框线

属性名：border-方位名词（top、right、left、bottom）

属性值：边框线粗细（像素值） 线条样式 颜色（不区分顺序）

外边框（margin）的属性值

与内边框border一样

注意：

margin实现版心居中效果：

把margin的左右执行写成auto（条件：盒子必须要有宽度）

解决盒子被撑大问题

内减模式：box-sizing:border-box（一般在清楚默认样式时就使用内减模式了）

清楚默认样式

清除标签：

way_one:通配符选择器选择全部标签，margin、padding取值为0

* {

   margin:0；

   padding:0；

}

way_tow:并集选择器选择所有标签，margin、padding取值为0

标签1,标签2,标签3……标签n {

   margin:0；

   padding:0;

}

清除有序、无序列表方式list-style取值为none即可：

list-style:none;

盒子问题

元素溢出：

属性名：overflow（控制溢出元素的内容显示方式）

属性值

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动（无论是否溢出都显示滚动条位置）
auto	溢出滚动（溢出才显示滚动条位置）

外边距问题--合并与塌陷

合并现象：

垂直排列的兄弟元素，上下margin会合并，取两个margin中的较大值生效

塌陷问题：

原因：父子级的标签，子级添加上外边距会产生塌陷问题，导致父级一起向下移动

解决方法：

取消子级margin，父级设置padding

父级设置overflow:hidden

父级设置border-top

行内元素--垂直内外边距

行内元素添加margin与padding，无法改变元素垂直位置时，给行内元素添加line-height可以改变垂直位置

盒子模型常用属性

属性名	功能
border-radius	实现圆角
box-shadow	实现阴影
opacity	实现透明度（不局限与颜色，范围0~1，0表示透明，1不透明）

圆角属性值

属性值：像素值/百分比（属性值是圆角半径）

格式：从左上角顺时针赋值，没有取角的值与对角的值取值相同

正圆形状：给正方形盒子设置圆角属性值为盒子宽高的一半（50%）

正圆最大值为50%，超过50%就没有效果了

胶囊形状：给长方形盒子设置圆角属性值为盒子高度一半

阴影属性值：

属性值：x轴偏移量（必写） y轴偏移量（必写） 模糊半径 颜色 内外阴影

格式：box-shadow: 像素值 像素值 像素值 像素值 颜色 （inset）；

注：默认是外阴影，内阴影要加inset

浮动（float）：

属性名：float

通过margin来调li盒子的间距

属性值	作用
left	左对齐
right	右对齐

如果父级的宽度不够，浮动的盒子会"掉"下来，这时就要用到清除浮动了

清除浮动

ways	name	steps
one	额外标签法	在浮动父级内容最后添加一个块级元素来设置CSS属性clear：both
tow	单伪元素法	在浮动父级类名后添加伪元素名，伪元素内容为clear：both
three（推荐）	双伪元素法	before：解决外边距塌陷问题；after：清除浮动（仍然是clear：both）

four overflow 浮动父级添加CSS属性overflow：hidden

备注：

清除浮动的类名习惯上起名为clearfix

单伪元素格式：

.clearfix::after{

   content:"";

   display:block;

   clear:both;

}

双伪元素格式：

/*before：解决外边距塌陷问题*/

/*after：清除浮动（仍然是clear：both）*/

.clearfix::before,

.clearfix::after{

   content:"";

   display:table;

}

.clearfix::after{

   clear:both;

}

flex布局（主流）

flex布局属性名

属性名	描述
display：flex	创建flex容器
justify-content	主轴对齐方式
align-items	侧轴对齐方式（对所有弹性盒子）
align-self	某个弹性盒子侧轴对齐方式（对单个弹性盒子）
flex-direction	修改主轴方向
flex	弹性伸缩比
flex-wrap	弹性盒子换行
align-content	行对齐方式

主轴对齐方式（justify-content）属性值

行对齐方式（align-content）属性值

属性值	效果
flex-start	弹性盒子从起点开始依次排列（默认值）
flex-end	弹性盒子从终点开始依次排列
center	t弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间（父级剩余的空间拿去分配成间距，使得弹性盒子之间的间距相等）
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧（间距出现在弹性盒子两侧，弹性盒子之间的距离是两端距离的2倍）
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等（间距与两侧距离相等）

备注：属性align-content对单行弹性盒子不生效

侧轴对齐方式（align-items、align-self）属性值

属性值	效果
stretch	弹性盒子沿着侧轴被拉伸直至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center	弹性盒子沿侧轴居中
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始排列

修改主轴方向（flex-direction）属性值

属性值	效果
row	水平方向，从左向右（默认）
column	垂直方向，从上向下
row-reverse	水平方向，从右向左
column-reverse	垂直方向，从下向上

弹性伸缩比（flex）属性值

属性值：整数数字，表示占用父级剩余尺寸的份数

备注：默认情况下，主轴方向尺寸是由内容撑开（使用伪类选择器选中弹性盒子后添加属性（flex、width、height）与属性值），侧轴默认拉伸

弹性盒子换行（flex-wrap）属性值

属性值	效果
wrap	换行
nowrap	不换行

定位

实现方式：定位模式+边偏移（用left、right、top、bottom来设置盒子的位置）

定位模式	属性值	是否脱标	显示模式	参照物
相对定位	relative	否	保持标签原有显示模式	自己原来位置
绝对定位	absolute	是	行内块特点	找最近的已经定位的祖先元素（父级，爷爷级……），如果所有祖先都没有定位则参照浏览器可视（窗口）区改位置
固定定位	fixed	是	行内块特点	浏览器窗口

备注：

定位居中的实现

steps one：使用绝对定位

steps tow：水平（left）、垂直（top）边偏移为50%

steps three：子级向左、上移动自身尺寸的一半，即左上的外边距为尺寸的一半。

实现steps three：

ways one："transform：translate（50%，50%）"；

ways tow："用margin来加边距实现：margin-left：取宽度一半的负数；margin-top：取高度一半的负数"

调整定位盒子的层级显示顺序

属性名：z-index

属性值：整数（默认值为0，取值越大显示顺序越靠上）

修饰属性

属性名	说明
vertical-align	实现文字垂直对齐方式（针对图片与文字在一个盒子中的文字）
transition（复合属性）	图片与文字 可以实现慢慢改变实现过度效果（用于鼠标悬停状态）
opacity	通常用于设置背景和内容实现整个元素的透明度
cursor	鼠标悬停于元素上时实现不同光标类型

备注：

复合属性：有多个值，且是空格隔开

垂直对齐方式（vertical-align）的属性值

属性值	效果
baseline	基线对齐（默认）
top	顶部对齐
middle（常用）	居中对齐
bottom	底部对齐

诠释过渡效果（transition）

属性值：过度的属性 花费的时间（要加单位s）

作用	可以将一个元素在不同状态之间切换的时候添加过渡效果
过度属性值的注意实现	过渡的属性可以是具体的CSS属性，也可以是all（两个状态属性值不同的所有属性，都产生过渡效果）

备注：

transition设置给元素本身，而不是设置给元素鼠标悬停状态

建议使用all，具体的CSS属性写法：改变宽度则在过度属性上写width，改变高度则在过度属性上写height，

一般translate属性都是于hover状态配合使用

光标类型（cursor）的属性值

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动