css小计

css小计

一、css概述

5. css的术语

• 属性，如：color
• 值，多值数字
• 关键字，如center
• 属性值，如：1px solid red
• 长度单位：px,rem,em,%,vw,vh,deg,s,ms等等
• 功能符，（函数）如：rgb()
• 声明，如：color:red;
• 声明块，{}
• 选择器
• 规则及（虚无缥缈）
  • 每一个声明后面要放;
  • 声明换行，换行能更清晰，但占的行数会多
  • 如果值为0px，0deg，0% ，后面的单位可以省略
  • 多个{}之间不需要加任何符号

6.css的特点

• 继承性
• 层叠性
• 优先级

二、选择器

1.基础选择器

(1)通用选择器

• 选择html文件内的所有元素
• *{样式声明}
• 最常用的css样式重置* {margin: 0; padding: 0;}

(2)标签选择器（元素选择器）

• 直接使用元素的标签名当做选择器使用
• 标签名 {样式声明} 如：div{color:red;}
• 弊端一旦使用，所有的相同标签都会应用该样式
• 权重值1
• 单独应用不是很广泛

(3)id选择器

• 使用标签中的id属性为标签指定id名
• #id名{样式声明}
• id选择器的权重值100
• 只能为当前标签指定样式

(4)类选择器

• 使用标签中的class属性，被标签指定类名，可以是多个类，多个类名用空格分开
• .类名{样式声明}
• 类选择器是在项目中非常常用
• 权重值10

(5)群组选择器

• 把需要共同有相同样式的选择器用逗号连接在一起
• 群组选择器可以连接各种选择器类型，不是说只能连接同类型选择器
• 选择器1,选择器2,选择器n {样式列表}

2.关系型选择器

(1)后代选择器

• 后代选择器，可以通过第一个祖先元素找到后代元素，中间需使用空格分隔
• 祖先选择器 后代选择器 {}
• 弊端后代包括太宽泛，如使用标签作为后代选择器，则可能发生选择混乱

(2)子代选择器

• 子代选择器，父级元素选择器大于号后跟子级元素选择器，可以多层使用
• 父级元素选择器 > 子级元素选择器 {样式列表}

(3)兄弟选择器

• 某选择器 后面的所有兄弟选择器，只会选择到后面的兄弟，不会选择到前面的兄弟（同级元素）
• 某选择器 ~ 该元素后面的兄弟元素{样式声明}

(4)相邻兄弟选择器

• 选择器后紧紧挨着的兄弟元素会被选到，前提是该兄弟的选择器使用争取
• 某选择器 + 该元素后面的兄弟元素{样式声明}

3.伪类选择器

• 伪类选择器是匹配同一个元素的不同状态下的样式
• 选择器:伪类{样式声明}
• a标签有四种状态
  • a:link未激活状态
  • a:hover鼠标悬停状态
  • a:active激活状态
  • a:visited访问过后的状态

(1)静态伪类

• a:link未激活状态
• a:visited访问过后的状态

(2)动态伪类

• a:hover鼠标悬停状态
• a:active激活状态
• input:focus获取焦点状态

4.伪元素选择器

• 伪元素指用于设置元素的“指定部分”样式
• 选择器::before {content: ""; }表示在元素前面的部分
• 选择器::after {content: ""; }表示在元素后面的部分
• ::before 和::after伪元素content: "";必须加

/* 在元素前面的部分 */
div::before {
    content: "你好，";
    color: red;
}
/* 在元素后面的部分 */
p::after {
    content: "❤";
    color: green;
}

5.css优先级

(1)优先级的比重

• 按照css引用方式分：内联样式>内部样式>外部样式
• 按照选择器权重分：id（100）>class（10）>标签（1）

(2)优先级原则

• 相同选择器，多个样式但不重复，会都应用
• 相同选择器，相同值，会以后写的优先
• 指定样式大于继承样式
• 多个选择器一起使用的时候，要计算权重值和来推算它的优先级

三、尺寸

1.宽度和高度

• 定义宽度width和高度height可以使用长度单位：px，pt，rem，em，%等等
• 一般pc端网页使用px
• 移动端使用em，rem，vw，vh等单位

2.最小和最大宽高

• 定义浏览器窗口中最小显示和最大显示的宽度和高度，最小不满足时出现横向或竖向拖动条
• max-width最大宽度
• max-height最大高度
• min-width最小宽度
• min-height最小高度
• 不允许出现负值

四、颜色

1.英文颜色

• 常用red
• transparent透明色

2.十六进制颜色

• #rrggbb#必须写
  • 1、2位代表红色范围
  • 3、4位代表绿色范围
  • 5、6位代表蓝色范围
• 十六进制颜色范围是0-9，a-f
• 如果三组都是相同的值，可以简

3.rgb颜色

• rgb()函数，三个参数，用逗号分隔
• r代表红色色值，g代表绿色色值，b代表蓝色色值
• 取值范围0~255之间的256个数
• rgba()a代表透明度，取值0~1之间的数字，0代表完全透明

五、边框

1.边框的属性

• border-width边框宽度
• border-style边框样式，solid实线dashed虚线dotted点点
• border-color边框颜色

2.边框的方向

• border-bottom下边框
• border-top上边框
• border-left左边框
• border-right右边框

六、元素的分类

1.元素的显示属性

• display元素以什么方式显示
  • display: block;以块级元素方式显示
  • display: inline;以内联元素方式显示
  • display: inline-block;属于行内元素，但以块级显示，俗称行内块
  • display: none;不显示

2.内联元素

• 内联元素也可以叫行内元素
• 设置宽度高度无效（行内块级显示元素除外）
• 和其他内联元素横向从左向右排列
• 设置上下内、外边距无效
• 常见的行内元素span a

3.inline-block

• 它是行内元素的一种
• 不自占一行横向从左向右排列
• 可以设置宽度、高度以及内外边距
• 常见的行内块级显示元素img button input
• 会出现幽灵空白节点
  • 把img标签变成块级元素 display: block;
  • 父级元素font-size: 0;去掉空白节点

4.块级元素

• 每个元素都自占一行，后面的元素也只能另起一行
• 元素的宽度、高度以及内外边距都可以设定
• 块级元素宽度不设定，为父级元素宽度
• 高度不设定为内容高度，如果没有内容，高度为0
• 常见的块级元素div,p,h1,ul,li,table

七、溢出

• overflow: hidden;溢出隐藏
• overflow: scroll;x轴y轴都出现拖动条
• overflow: auto;只有溢出的方向出现拖动条
• overflow: visible;溢出默认展示
• 单独设定x轴或者y轴的溢出
  • overflow-x: auto;
  • overflow-y: hidden;

八、圆角

1.元素的四个角

• border-top-left-radius左上角
• border-top-right-radius右上角
• border-bottom-left-radius左下角
• border-bottom-right-radius右下角

2.圆角的取值

• 1个值代表四个角
• 2个值代表左上右下，右上左下
• 3个值代表左上，右上和左下，右下
• 4个值代表 左上，右上，右下，左下

3.圆角的极限

• 圆形,元素宽高一致border-radius: 50%;
• 椭圆形，元素宽高不一致border-radius: 50%;
• 胶囊型border-radius: 高度的一半;

九、盒子阴影

1.盒子阴影的属性

• box-shadow: x轴偏移 y轴偏移 羽化 扩展 颜色 内阴影
• 第一个值和第二个值代表： x轴上的偏移量 和y轴上的偏移量（正负值）。
• 第三个值代表：模糊半径的大小（羽化）不允许负值。
• 第四个值代表：扩展半径的大小，向四周扩散相等的大小,正值放大，负值缩小。
• 第五个值代表：颜色值。
• 第六个值（可选）代表：阴影向内inset：默认阴影向外扩散。

2. 多阴影

• 盒子阴影可以设置多层
• 每一个阴影效果为一组，中间用逗号分隔阴影组

十、轮廓

• outline属性
• 简写outline:width style color;
• input标签有默认的轮廓线，清空轮廓线input {outline: none;} 或 {outline: 0;}

十一、盒子模型

1. 盒尺寸四大家族

• 一个元素实际占地宽度：
  左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
• 一个元素实际占地高度：
  上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

2. 元素内容

(1) 内联元素盒模型

• 宽度高度是auto，靠内容撑开
• 设置宽度高度无效
• 设置上下内外边距无效
• 排列方式，从左至右

(2) 内联元素盒模型块级元素盒模型

• 块级元素就可以设置宽度和高度，
• 只有文字内容不设置宽度高度，宽度为父元素的一行，高度为内容撑开的高度。
• 宽度高度可以设置
• 内外边距设置均有效果
• 排列方式，从上至下

3. 内边距

(1) 内边距的属性

• padding指盒子的“内补间”，宽高之外到边框以内的距离。
• 可以设置长度，如px、em、rem等,且不支持负值
• padding有四个方向分别是上、右、下、左
  • padding-top 上内边距
  • padding-right 右内边距
  • padding-bottom 下内边距
  • padding-left 左内边距

(2) 内边距的值

• padding:长度值;
• 1个值，将用于全部的四边。
• 2个值，第一个用于上、下，第二个用于左、右。
• 3个值，第一个用于上，第二个用于左、右，第三个用于下。
• 4个值，将按上、右、下、左的顺序作用于四边。

4.外边距

(1) 外边距的属性

• margin指盒子的外边距，外边距是当前元素和其他元素之间的距离。
• 可以设置长度，如px、em、rem，%等,%取值都是父元素宽度的百分比取值。
• 正值时是增大该方向外边距，负值时是缩小该方向外边距。
• margin有四个方向分别是上、右、下、左
  • margin-top 上外边距
  • margin-right 右外边距
  • margin-bottom 下外边距
  • margin-left 左外边距

(2) 内边距的值

• 1个值，将用于全部的四边。
• 2个值，第一个用于上、下，第二个用于左、右。
• 3个值，第一个用于上，第二个用于左、右，第三个用于下。
• 4个值，将按上、右、下、左的顺序作用于四边。

(3) margin的无效情形

外边距可以让元素发生位移效果，但只有左和上外边距会移动当前元素。下和右外边距，只能让当前元素和周围的元素保持距离。当旁边没有其他元素时，它只是看上去无效。

(4) margin的auto取值

• 块级元素在父元素中水平居中margin:上下距离 auto;
• 上下距离在没有的时候可以写0
• 内联素使用margin：auto，不能完成居中效果

(5) 自带外边距的元素

• css reset 进行样式统一 * {margin：0；padding：0;}
• body : 四个方向各8px
• ul ： 上下16px外边距，“左内边距”40px

(6) 外边距合并现象

• 兄弟元素之外边距合并
• 两个在文档流中（垂直相邻）兄弟之间外边距，同时存在的时候，取最大的值。

(7) 外边距溢出解决方案

• 外边距溢出是父元素中在文档流里的第一个和最后一个子元素会和父元素的上下边界产生合并现象。
• 解决方案
  • 父元素增加padding-top缺点：增加了父元素实际高度
  • 增加父元素的边框，缺点：增加了父元素实际高度
  • 父元素增加overflow: hidden/auto;，缺点，父元素就不能溢出显示内容了
  • 使用空<table></table>放在第一个子元素前和最后一个子元素后，作用是分隔与父级的粘连
  • 使用CSS3伪元素::before给父元素添加内容,源于增加空<table></table>

【例子】清除外边距溢出的方法

.baba{
width:300px;
height:300px;
background-color:red;
/*overflow:hidden/auto;*/
/*缺点：父元素就不能溢出显示内容了*/
/*padding-top:50px;*/
/*缺点：增加了父元素实际高度*/
/*border:1px solid transparent;*/
/*缺点：增加了父元素实际高度*/
}
/*使用CSS3伪元素`::before`给父元素添加内容*/
.baba::before{
content:"";
display:table;
}
}  

十二、盒子模型的运用

1. 外边距的使用场合

• 元素的位置微调
• 元素之间的距离调整

2. 内边距的使用场合

• 改变边框内到内容之间的范围，用户“感觉”元素变大
• 文本与边框增加距离，把元素撑开
• 某些时候内边距也可以增加元素的距离
• padding没有auto

3. 盒子模型的计算方式

• box-sizing: content-box; 标准盒子模型
  • 元素所占宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
  • 元素所占高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距
• box-sizing:border-box 改变盒子模型计算方式
  • 设置的宽度width = 左右border + 左右padding + 内容的宽度
  • 设置的高度height = 上下border + 上下padding + 内容的高度
  • 注意：可能会导致内容溢出，需要时再使用

十三、背景

1. 背景颜色

background-color: 颜色色值;

2. 背景图片

（1）背景图

• background-image: url(路径);
• 路径可以是绝对路径或者相对路径,注意外部css的路径
• 背景图必须要求元素具有宽度和高度

（2）背景图和img的区别

• 尺寸角度
  • img具有自己的尺寸，不设置宽度高度，可以直接显示 （如同照片）
  • 背景图必须设置宽度和高度 （如同打印）
• 增加内容角度
  • img图片上不可以直接写文字，除非在img盒子外部定位
  • 背景图是可以在图片上写文字的，图其实和颜色一样
• 功能角度
  • img一般用于产品展示，可以根据素材更新
  • 背景图一般左大背景或者更新小图标icon

3. 背景图平铺

• background-repeat:repeat; 默认值 横向纵向都
• background-repeat:no-repeat; 不平铺
• background-repeat:repeat-x; x轴平铺
• background-repeat:repeat-y; y轴平铺

4. 背景图定位

• background-position可以改变背景图的默认的位置，默认位置在元素的左上角。
• 调整背景图在元素中的位置，有2个方向：x轴方向和y轴方向。
  • background-position:x轴 y轴 两个方向
  • background-position-x 单独定义x轴
  • background-position-y 单独定义y轴
• background-position取值
  • 可以使用长度单位，如：px、pt、em、%等
  • 关键字：top、bottom、center、right、left
  • 取值可以为正值和负值，正值向右移动负值向左移动

5. 背景图尺寸

• background-size属性来控制背景图片的大小
• 在拉伸方向中有宽度拉伸和高度拉伸两种，所以可以指定两个值background-size:x轴拉伸 y轴拉伸;
• 取值
  • 取1个值，这个值指定图片的宽度，图片的高度隐式的为auto
  • 尺寸可以为px、pt、em、%
  • 关键词
    • cover:铺满整个容器的宽高，而图片多出的部分则会被裁掉；
    • contain:容器内至少有一张完整的图，no-repeat情况下容器会有留白区域。repeat情况下留白区域则平铺背景图

6. 背景的简写方式

• background:color image repeat position;简写属性，四组值用空格分开,没有顺序
• background简写中不包括background-size，size需要单独写
• background最简写法可以是background：color 或者 background：url，其他不可以
• 简写的弊端：简写的方式会覆盖上边定义好的

十四、渐变

1. 线性渐变

(1) 颜色和角度

• background-image: linear-gradient(color1,color2,……);渐变最少两个颜色，才能体现出颜色的变化
• linear-gradient()渐变颜色的参数用逗号分开，可以写多种颜色表达方式
• 渐变的方向，按照参数顺序依次向下，可以在颜色前加入角度或关键字控制渐变方向
  • 90deg 角度
  • to 终点 关键词，就是终点在哪个位置，top，left，right，bottom，记得加空格 （不建议使用）

【例子】：双色渐变，颜色写在第一个是最上面的，依次向下，中间用逗号分开，可以写多种颜色表达方式
【例子】：多色渐变
【例子】：带角度的渐变

.d1 {
  background-image: linear-gradient(red, yellow);
}
.d2 {
  background-image: linear-gradient(red, yellow, green, blue);
}
.d3 {
  background-image: linear-gradient(45deg,rgb(161, 22, 22), rgb(17, 223, 62));
}
.d4 {
  background-image: linear-gradient(to left,rgb(27, 24, 214), rgb(153, 243, 9));
}

(2) 渐变的比例

background-image：linear-gradient(方向，颜色1 起始值 结束值，颜色2 起始值 结束值，颜色n 起始值 结束值……)

.d1 {
  background-image: linear-gradient(90deg, green 0 200px, yellow 200px 400px, red 400px 600px);
}

2. 径向渐变

(1) 渐变方向和范围

• background-image: radial-gradient(color1,color2,……);
• background-image：radial-gradient(颜色1 起始值 结束值，颜色2 起始值 结束值，颜色n 起始值 结束值……)

(2) 半径

• background-image: radial-gradient(半径,颜色1,颜色4,颜色3);
• background-image: radial-gradient(x轴半径 y轴半径,颜色1,颜色4,颜色3);
• 半径只传入一个参数，则表示该渐变形状为圆
• 半径可以是px或%，使用px不会因为半径的变化而变化
• 颜色范围用的百分比,半径变化，百分比参照半径
• 注意，低版本浏览器范围有兼容问题，只能写以一个值

.d1 {
  background-image: radial-gradient(red,yellow);
}
.d2 {
  background-image: radial-gradient(rgb(48, 63, 199),rgb(19, 194, 179),rgb(0, 255, 0));
}
.d3 {
  background-image: radial-gradient(red 0% 30%,yellow 30% 60%,green 60% 100%);
}

(3) 圆心起点

• background-image: radial-gradient(x轴半径 y轴半径 at x轴圆心 y轴圆心,颜色1 起始值 结束值，颜色2 起始值 结束值……)
• 取值可使用px，% 或者关键词：left/top/bottom/right

【例子】:分别用关键词和百分比确认原点位置

.d1{
  background-image: radial-gradient(50px at left top,yellow 0 50px,#222 100px);
}
.d2{
  background-image: radial-gradient(50px at 20% 30%,yellow 0 50px,#222 100px);
}

3. 重复的渐变

• background-image: repeating-linear-gradient() 重复的线性渐变
• background-image: repeating-radial-gradient() 重复的径向渐变
• 注意：当半径过小，页面分辨率显示效果会怪异
• 低版本浏览器重复渐变不会显示效果

.d1{
  background-image: repeating-linear-gradient(red 0 2px, yellow 4px 6px, green 8px 10px);
}
.d2{
  background-image: repeating-radial-gradient(red 0 2%, yellow 2% 4%, green 4% 6%);
}

4. 对渐变的兼容

（1）浏览器私有前缀

• -webkit- 浏览器：chrome/safari/edge
• -moz- 浏览器：firefox
• -o- 浏览器：opera
• -ms- 浏览器：IE

（2）渐变的方向

• 不写私有前缀，要写终点的方式，如 to bottom
  • 没有私有前缀正确写法:background-image: linear-gradient(to bottom,red,yellow);
  • 没有私有前缀错误写法:background-image: linear-gradient(bottom,red,yellow);
• 写私有前缀要写起点的方式 如top
  • 有私有前缀正确的写法:background-image: -webkit-linear-gradient(top,red,yellow);
  • 有私有前缀错误的写法:background-image: -webkit-linear-gradient(to top,red,yellow);

十五、文本格式化

1. 字体属性

（1）字体大小

• font-size: 30px;字体号属性
• 取值，如px、pt、em、rem、vw等等，不允许负值像素，尽量不出现小数。
  • px像素
  • pt磅
  • em父级元素的倍数
  • rem根标签的倍数
  • vw视窗尺寸

（2）字体系列

• font-family属性设置所需要的字体
• 一个单词的可以之际使用，多个单词组成词组的用引号括起来，中文尽量用引号括起来
• 多个字体列表按照顺序从前往后查找执行

div {
 /* 一个单词的 */font-family: chiller;
 /* 多个单词建议用引号 */font-family: "Goudy Stout";
 /* 中文 */font-family: "华文彩云";
}

（3）字体字重

• font-weight字体的字重，字的粗细
• 于 1 和 1000 之间的数字类型值，必须要是100的倍数。
• 常用关键词：normal（400 默认）、bold（700）
• 浏览器不同展现效果不同，需要注意

（4）字体样式

• font-style字体样式属性
• font-style: normal; 默认正常
• font-style: italic; 斜体

（5）小型大写字母

• font-variant: small-caps;
• 英文字母变为大写

（6）字体的简写方式

• font:italic small-caps 400 40px chiller;
• 顺序：字体样式 小型大写 字重 字号 字体系列

2. 文本属性

（1）字体颜色

• color：颜色的色值
• 取值:英文，十六进制，rgba(),hsl()等

（2）文本的水平对齐方式

• text-align针对块级元素中的内联元素
• 取值
  • left默认,左对齐
  • center居中对齐
  • right右对齐
  • justify两端对齐

【例子】尝试个各种对齐方式

div{
/*常用*/
text-align:center;
/*默认*/
text-align:left;
/*巨右*/
text-align:right;
/*两端对齐,兼容性不太好*/
text-align:justify;
}

【例子】:中文的两端对齐

 div {
  width: 100px; height: 30px;
  border: 5px solid red;
  text-align: justify;
  box-sizing: border-box; /*必须写,清除幽灵*/
}
span {
  display: inline-block;
  padding-left: 100%;
}
/*需要加span*/
<div>姓名<span></span></div>
<div>联系方式<span></span></div>

(3) 文本的行高

• line-height属性可以设置文本的行间距
• 文本的行高包括文字上下间距+文本高度，文本居中上下行间距相等
• 使行间距等于元素高度，则“单行文本”垂直显示在元素中
• 取值可以使用px,em等单位,或者无单位的倍数如1，1.5，2

【例子】:单行文本上下居中
【例子】:多行文本上下居中（需要计算）

div{
height: 200px;
line-height: 20px;
padding-top: 70px;/*(200-20*3)/2*/
box-sizing: border-box;/*注意border*/
}

(4) 文本的线条修饰

• text-decoration: none;无线条
• text-decoration: underline;下划线
• text-decoration: overline;上划线
• text-decoration: line-through; 删除线

（5）首行缩进

• text-indent指定块容器中第一行文本的缩进
• text-indent:2em两倍的字体大小,相当于空两格

（6）文字阴影

• text-shadow为文字添加阴影。
• 可以添加多个阴影，阴影值之间用逗号隔开。
• 参数：
  • 第一个值和第二个值代表： x轴上的偏移量 和y轴上的偏移量,长度单位，可以为负值。
  • 第三个值代表：模糊半径的大小（羽化）。【可选】
  • 第四个值代表：颜色值。【可选】

div{
/* x轴偏移 | y轴偏移 | 模糊半径 | 颜色 */
text-shadow: 1px 1px 2px black;
}

十六、表格可以使用的样式

• table的样式
  • border-collapse: collapse;去双边框缝隙
  • border-spacing: 10px;单元格之间的距离，前提是“不能”去掉双边框缝隙
• td的样式
  • margin外边距设置无效
  • td的垂直居中vertical-align: middle其他值:top,bottom
• 表格标题
  • <caption>表格标题</caption>

十七、流

1. css流和定位机制

（1）默认文档流

• 内联元素，从左向右排列
• 块级元素，从上向下排列

（2）css的定位机制

• 正常的文档流
• float 浮动
• postion 定位

（3）脱离文档流

文档一旦脱离文档流，不受文档流的布局约束了，在算其父元素的高度时，就不包括其自身了

2. 浮动

（1）浮动的属性

• 元素浮动，会使其脱离文档流，导致父元素对其失去包裹能力
• float：none默认不浮动
• float：left左浮动
• float：right有浮动

（2）浮动的结果

• 当元素左浮动或右浮动，该元素脱离文档流不再撑起父元素
• 浮动元素不再自占一行
• 在元素浮动的“当前行”向左或向右对齐

(3) 浮动元素的占位

（2）文字环绕

(3)浮动过程：

• 脱离文档流不再撑起父元素
• 不再自占一行
• 在元素浮动的“当前行”向左或向右对齐

(4)浮动特点

• 元素浮动，脱离文档流，元素不沾页面空间，后续元素上前补位
• 元素浮动后，会按照浮动属性停在父元素的左侧或右侧，如果前面有浮动元素就跟在其后面
• 多个元素浮动，父元素放不下会折行
• 一个内联元素浮动，会变成块级元素
• 文本、内联元素、行内块，不会被浮动元素压住，会形成环绕

3. 清除浮动

清除浮动并不是去除浮动，而是将浮动带来的负面效果解决掉。因为浮动会产生高度坍塌

（1）利用高度解决

给父元素高度，弊端是未必知道子元素的高度

.baba {
  height:100px;
}
.erzi {
  width:100px;
  height:100px;
  float:left;
}

（2）父元素也浮动

父元素浮动，会影响父元素的兄弟元素

.baba {
  float:left;
}
.erzi {
  width:100px;
  height:100px;
  float:left;
}

（3）父元素溢出隐藏

overflow：hidden/auto，父元素中的子元素可能会被隐藏

.baba {
  overflow：hidden;
}
.erzi {
  width:100px;
  height:100px;
  float:left;
}

（4）增加一个clear：both的子元素

clear属性四个值：none，left清除左侧浮动，right清除右侧浮动，both清除两侧浮动。使用这个方法需要一个单独的没有浮动的元素做这件事,但弊端是多一个标签

<div class="baba">
  <div class="erzi1"></div>
  <div style="clear: left;"></div>
  <div class="erzi2"></div>
  <div style="clear: both;"></div>
  <div class="erzi3"></div>
  <div class="erzi4"></div>
</div>

（4）增加一个clear：both的子元素

.baba > .erzi5{
width:0;  height:0;
clear:both;  float:none;
}

<div class="baba">
  <div class="erzi1"></div>
  <div class="erzi2"></div>
  <div class="erzi3"></div>
  <div class="erzi4"></div>
  <div class="erzi5"></div>
</div>

（5）用伪元素解决

给父元素增加一个在尾部的伪元素，content:"\200B";这个参数，Unicode字符里有一个“零宽度空格”

.clearFloat:after {
content:"\200B";
display:block;
height:0;
clear:both;
}
.clearFloat {*zoom:1;}/*IE/7/6*/

4. 浮动流体布局

(2) 封装reset.css

/*简单的 css reset */
* {
margin: 0;padding: 0;
}
a {text-decoration: none;}
ul {list-style: none;}
/* 清除浮动 */
.clearFloat:after {
content: '\200B';
display: block;
height: 0;
clear: both;
}
.clearFloat {
*zoom: 1;
}
.center {
width: 1000px;
margin: 0 auto;
}

十七、显示和隐藏属性

1. display:none

• display：none;使元素消失，脱离文档流的消失
• display：block;使元素出现，元素显示为块级元素

2. visibility: hidden

• visibility: visible;元素显示
• visibility: hidden；元素隐藏，占据自身位置

3. opacity: 0;

• opacity属性代表元素的透明度，取值范围是0-1之间的数字,0 代表完全透明,1 代表不透明
• 缺点是，元素内的一切都会随着透明度改变

【例子】

.d1{
background-color:blue;
/*显示*/
display:block;
/*消失*/
display:none;
}
.d2{
background-color:red;
/*显示*/
visibility:visible;
/*隐藏*/
visibility:hidden;
}
.d3{
background-color:green;
/*完全不透明*/
opacity:1;
/*完全透明*/
opacity:0;
}

十八、垂直对齐方式

1.vertical-align属性

• vertical-align是用来设置内联元素对齐方式的，针对的并不是自身的文字
• 常用关键字值：
  • vertical-align: middle;
  • vertical-align: top;
  • vertical-align: bottom;
  • vertical-align: baseline;img的默认对齐值为基线对齐

【例子】:在前后加入内联元素或文字【改bottom、middle】

input {
height: 100px;
vertical-align: top;
}
<span>前一段文字</span>
<input type="text">
<a href="#">后一段文字</a>

2. 文本元素基线

【例子】：img前后有内联元素时，文字对默认的是基线对齐

img {
vertical-align: baseline;/*不写就是默认值*/
vertical-align: bottom;
}

十九、列表样式

• list-style 属性是一个简写对属性集合
• list-style简写，list-style:none去掉标识(常用)
• 分开写样式包括:
  • list-style-type列表标记
    • list-style: none;没有标记
    • list-style: disc;默认实心圆点
    • list-style: circle;空心圆点
    • list-style: '♥';自定义圆点
  • list-style-image设置列表标识为小图片
    • url()使用绝对路径或者相对路径
    • 最好放小图，图标大小无法设置
  • list-style-position设置标识在li的定位
    • list-style-position: outside;默认在li外
    • list-style-position: inside;默认在li里

十九、光标设置

• cursor: default;箭头
• cursor: pointer;小手
• cursor: wait;等待
• cursor: text;文本
• cursor: crosshair;十字
• cursor: progress;箭头+问号
• cursor: help;箭头+问号

二十、定位

1.position属性

• position属性是定位属性，用于指定一个元素在文档中的定位方式。
• top，right，bottom 和 left属性值则决定了该元素的距离四边的位置，可以为负值。
• 开发中多用绝对长度单位px进行调整，如果在移动端中，可以使用rem、vw等单位进行调整。
• 常用取值：
  • relative相对定位
  • absolute绝对定位
  • fixed 固定定位

2.相对定位

• 相对定位position: relative不脱离文档流。
• 可使用top，right，bottom 和 left 做偏移。
• 元素相对的位置是自己本来的位置，移动不改变页面布局。
• 相对定位属性不会影响周围的布局，但会出现新的层叠顺序。
• 当四个方向值发生重合时，以top和left为优先。

3.绝对定位

• absolute绝对定位，元素将脱离文档流，其他元素不为该元素预留空间。
• 它的移动参照为祖先元素的偏移，来确定元素位置。元素会逐层向上寻找自己的参照元素，当找到的最近一层祖先元素具有position属性时，该元素就会以这个祖先元素的原点为参照点。
• 可使用top，right，bottom 和 left 做偏移。
• 当四个方向值发生重合时，以上和做为优先。
• 绝对定位的元素可以设置外边距，且不会与其他边距合并。

【例子】：使用元素定位让已知高度的子元素在父元素中上下左右居中

.baba{
width:500px;
height:400px;
background-color:red;
position:relative;
}
.erzi{
width:150px;
height:200px;
background-color:blue;
position:absolute;
left:50%;
top:50%;
margin-left:-75px;
margin-top:-100px;
}

4.固定定位

• position: fixed;它到父级始终是html
• 直接在窗口的某个位置固定
• 可使用top，right，bottom 和 left 做偏移。

【例子】:居中的提示窗，固定定为，元素在父元素中居中
【例子】：加一个长图，和返回顶部元素

5.z-index

(1) 层叠顺序取值

• z-index层叠顺序
• 直接设置没有单位的整数，可以为负值，值越大层级越高

(2) 层叠领域的准则

• 值大的在上：z-index的值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的。
• 后来的在上：当元素的层叠水平一致的时候，在文档流中处于后面的元素会覆盖前面的元素。

二十一、css复杂选择器

1.属性选择器

• 属性选择器可以使用[]将元素的属性名称放入其中，从而通过查找具有该属性的元素来设置其样式。
• 元素的属性包括：
  • 预定义属性：如id、class、style、title、src、href等
  • 自定义属性：随意指定的属性名如abc、w123 或 更标准的自定义属性写法 data-*

(1)简单属性选择器

• 具有某个属性的元素，如id、class ： [属性名]{样式声明}
• 特指某个元素具有某个属性，如:p[class]：元素名[属性名]{样式声明}
• 具备多个属性的元素，如:[id][class] : [属性名1][属性名2]{样式声明}
• 特指某元素具备多个属性：元素名[属性名1][属性名2]{样式声明}

【例子】

[id] {color: red;}
[class] {color: blue;}
p[class]{color: green;}
[class][title]{background-color: yellow;}
p[class][title]{background-color: pink;}

<div class="a">.a div</div>
<div class="a">.a div</div>
<div class="b" title="txt">.b div txt</div>
<div id="mydi">#myid</div>
<p class="a">.a p</p>
<p title="txt">p txt</p>
<p class="c" title="txt">.c p txt</p>

(2)筛选属性选择器

• 元素的属性名的值为什么，如id=mydiv ： [属性名=值]{样式声明}
• 元素的属性名以什么值开头：[属性名^=开头的字段]{样式声明}
• 元素的属性名以什么值结尾：[属性名$=结尾的字段]{样式声明}
• 元素的属性名包括某字段的值：[属性名*=包含的字段]{样式声明}
• 元素的属性名包括某独立的字段值：[属性名~=包含的字段]{样式声明}

【例子】

[class=a] {color: red;}
[class^=a] {color: blue;}
[class$=a] {color: green;}
[class*=c] {color: purple;}
[class~=b] {color: purple;}

<div class="a">.a div</div>
<div class="abc">.abc div</div>
<div class="b">.b div </div>
<p class="ac">.ac p</p>
<p class="c" >.c p </p>
<p class="c b" >.c .b p </p>

2.目标伪类选择器

• 对应锚点被激活时，匹配的样式
• 选择器:target{样式声明}

【例子】

div{
width:200px;
height:200px;
font-size:60px;
text-align:center;
border:1px solid black;
}
div:target{
background-color:yellow;
}
/*可以做成类似tab切换效果*/
div{
display:none;
}
div:target{
display:block;
}

<a href="#div1">选择1</a>
<a href="#div2">选择2</a>
<a href="#div3">选择3</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

3.结构性伪类选择器

• 匹配父元素的第一个孩子 ：父元素>:first-child {样式声明}
• 匹配父元素的最后一个孩子 ：父元素>:last-child { 样式声明}
• 匹配父元素的第n个孩子： 父元素>:nth-child(n) { 样式声明}
• 匹配内部没有任何内容（包含文本）的标签 ：父元素 >:empty{ 样式声明}
• 匹配父元素的唯一子元素：父元素 >:only-child{ 样式声明}
• 使用not()参数为选择器，否定该括号内选择器的其他所有选择器，类似于取反：父元素 >:not(不想要的选择器){样式声明 }
• div:nth-child(2) 与 div>:nth-child(2) 有区别。第一个是指定第二个子元素是div，第一个是没有特指。

4.伪元素

(1)首字母

:first-letter选中某“块级元素”第一行的第一个字母
【例子】

div::first-letter {
  color: red;
  font-size: 30px;
}
/* 内联元素无效 */
span::first-letter {
  color: red;
  font-size: 30px;
}

(2)首行

::first-line 在某块级元素的第一行应用样式。
【例子】

p::first-line {
  color: red;
  font-size: 30px;
}
/* span 无效 */
span::first-letter {
  color: red;
  font-size: 30px;
}

(3)选中高亮

::selection 文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）

【例子】

p::selection {background-color: red;}

二十二、弹性布局

弹性布局是css3主推的一个布局，传统布局是基于文档流和盒子模型的，主要以浮动布局，定位布局等。

1.弹性布局的基本概念

(1)容器和项目

使用flex布局的元素（父元素），称为"容器"
它的所有“子元素”自动成为容器成员，称为 “项目”
它们各自有控制布局的属性

(2)主轴

-主轴就是项目的排列方向，主轴会出现四个方向：

• x轴：起点在左侧
• x轴：起点在右侧
• y轴：起点在顶端
• y轴：起点在底端
• 交叉轴
  就是在主轴的垂直方向，项目可在交叉轴上移动

2.将容器指定为flex布局

任何一个容器都可以指定为 Flex 布局:

.box{display: flex;}

行内元素也可以使用 Flex 布局:

.box{display: inline-flex;}

注意，设为 Flex 布局以后，子元素的float、clear等属性将失效。

3.容器的属性

(1)主轴的方向

flex-direction 代表主轴的方向，即项目的排列方向

.box {
 /*            左向右    右向左        上向下      下向上 */
  flex-direction: row | row-reverse | column | column-reverse;
}

(2)项目换行

• 默认情况下，项目都排在一条线上。
• flex-wrap属性定义如果一条轴线排不下，如何换行的模式。

.box{
 /*          默认不换行  换行    反向换行 */ 
  flex-wrap: nowrap | wrap | wrap-reverse;
}

(4)主轴上的对齐方式

• justify-content属性定义了项目在主轴上的对齐方式。是默认起点对齐、终点对齐还是居中对齐等。
• 前提是，如果项目会换行,则下行按照下一行的数量对齐，间隔与上一行可能不同。不换行元素会在容器缩小是缩小，不会出现对齐效果。

.box {
  justify-content: flex-start |  默认起点对齐
  flex-end | 终点对齐
  center | 居中对齐，一起居中
  space-between | 两端对齐，项目之间的间隔都相等，左右贴边
  space-around; 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍
}

(5)交叉轴对齐方式

• align-items属性定义项目在交叉轴上如何对齐，"前提是"前提是项目换行,容器的垂直轴方向是有独立高度或者宽度的。
• 注意：多行项目会有行间距离

.box {
  align-items: flex-start | 交叉轴的起点对齐
  flex-end | 交叉轴的终点对齐
  center | 交叉轴的中点对齐
  baseline | 项目的第一行文字的基线对齐,需要给项目设置单独的高度和内上边距和行高可以看出来
  stretch;默认值，如果项目未设置高度或设为auto，将占满整个容器的高度
}

(6)多轴线对齐方式

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start |与交叉轴的起点对齐。
   flex-end |与交叉轴的终点对齐。
    center |与交叉轴的中点对齐。
    space-between |第一行和最后一行贴开始和结束，其他均分中间位置
    space-around |每行间距两侧或上下间距相等，比边框间距大一倍
    stretch;(默认值)
}

4.项目属性

(1)项目排列数次序（拿号加塞）

• order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• 相当于谁排第一谁排第二，默认是原有元素的顺序，这个是可以重新更改的，单独设置给每个项目，值越大排的越靠后。
• 调整顺序用的不是很多，因为有点反人类思维

.item {
  order: /*数值，值越大排的越靠后，默认为0;*/
}

(2)项目的放大比例（多吃多占）

• flex-grow属性定义项目的放大比例，默认为0。
• 当项目设置了该属性之后，原来的宽度或宽度失效。
• 项目不换行时：
  • 父元素有多余的空间，设置放大比例的元素按照比例占据多余空间
  • 父元素没有多余空间，当父元素总长度等于和低于元素宽度或者高度相加总和时，元素们同等比例缩小，无特殊化，放大比例失效。
• 项目换行时：
  • 父元素会有多余空间，因为只要空间不够就换行了，只要有多余空间，放大比例元素会在当前行按照自己的比例分隔剩余空间。默认比例的元素会正常按照宽度占位
  • 父元素宽度与元素宽（高度）相加正好相等，多余空间是0，那么设置放大比例的元素，则暂时不会变更宽度。

.item {
  flex-grow: <number>比例值; /* default 0 */
}

(3)项目的缩小比例（缩水比例）

• flex-shrink属性定义了项目的缩小比例，默认为1，负值无效。
• 前提是容器设置不换行才能看出效果，容器设置宽度看的更清晰
• flex-shrink：0：项目不换行容器缩小，其中的项目同等压缩，但设置了flex-shrink：0的项目不会压缩，会保持自己的宽度（高度）也就是不参与压缩
• flex-shrink：其他值如2、10等，缩小比例值越大，缩小的比重就越大。

.item {
  flex-shrink: <number>缩小比例值; /* default 1 */
}

(4)项目的自动尺寸（特立独行）

• 当flex-basis和width属性同时存在时，width属性不生效
• flex布局有多余空间时，item的宽度为flex-basis设置的宽度
• 当flex空间不够时，由于flex-shrink的默认值为1，所以所有flex items容器等比例被压缩，设置flex-basis的项目也会按照最大值的相对比例压缩，不会和其他元素比例相同。

.item {
  flex-basis: <length>如200px | auto; /* default auto */
}

(5)flex属性简写

flex属性是flex-grow(放大比例), flex-shrink(缩小比例) 和 flex-basis(自动尺寸)的简写，默认值为0 1 auto。后两个属性可选。

常用设置是：flex:0 0 ??px;  不放大，不缩水，占多少尺寸

二十三、过渡

1.过渡属性的名称

• 需要设置过渡的属性名transition-property:属性 如：transition-property:width;
• 当过渡多个样式的时候可以写all，如：transition-property:all;

2.过渡需要都时间

• 过渡样式的时间transition-duration,如：transition-duration: 1s;
• 过渡的时间直接是以秒s或者ms为单位，默认0s

3.过渡的方式

• 过渡方式看一个网址http://www.css3beziercurve.net/
• transition-timing-function过渡方式
  【例子】

div{
transition-property:all;
transition-duration: 1s;
/*默认值，先慢再快最后慢*/
transition-timing-function:ease;
/*先慢，后越来越快*/
transition-timing-function:ease-in;
/*速度在开始和结束时都很慢,中间不加速*/
transition-timing-function:ease-in-out;
/*先快，后越来越慢*/
transition-timing-function:ease-out;
/*匀速*/
transition-timing-function:linear;
}

body:hover div{left:400px;}

4.过渡的延迟时间

• transition-duration:2s;延迟过渡时间
• 在过渡效果开始作用之前需要等待的时间，值以秒（s）或毫秒（ms）为单位。
• 取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

5.简化写法

• 顺序是transition：过渡时间 延迟时间 过渡方式 过渡样式
• 注意顺序不能改变（可以改变看效果）
• 最简写法：transition：过渡时间

【例子】

div {
transition: 1s 2s linear all;
}

6.多重样式过渡

• 使用transition进行多个样式并且不同时过渡样式时，每一个不同时间的过渡样式需要用逗号分隔。
• transition:执行时间 方式 样式1,执行时间 延迟时间 样式2;

【例子】

div{
width:100px;
height:100px;
position:relative;
background-color:red;
left:0;
/* 注意第二个的延迟时间 */
transition:1s linear background-color,1s 1s left;
}
body:hover div{
left:400px;
background-color:blue;
}

二十四、变化

1.transform变化属性

• 一个变化函数：transform:变化函数();
• 多个变化函数:transform:变化函数1() 变化函数2() ……;

2.translate()位移函数（2D）

• transform:translate()在2d变换中位移可以有X轴和Y轴的位移方向
• 参数可以使用长度单位，百分比对应的是自己的宽度和高度，正直或者负值均可。
  • transform: translateX(x); 沿X轴方向平移 正值左移 负值右移
  • transform: translateY(y); 沿Y轴方向平移 正值下移 负值上移
  • transform: translate(x, y); 沿X轴和Y轴同时平移
• 注意：位移和固定定为不同，它并没有脱离文档流，也不会影响其他元素的布局

【例子】未知宽高居中

.box{
height:300px;
background-color:yellowgreen;
position:relative;
}
.box div{
width:200px;
height:100px;
background-color:red;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

3.rotate()旋转函数（2D）

• transform:rotate()函数在2d变换中旋转只能以Z轴进行旋转，所以rotate()函数默认为Z轴旋转函数。
• 参数为旋转角度，deg单位为旋转角度。角度可以为正值或负值。
• 旋转中心点，是元素最中心的点

    div {
      width: 100px;
      height: 100px;
      color: #fff;
      font-size: 18px;
      text-align: center;
      transition: 1s;
    }
    div:nth-child(1) {
      background-color: red;
    }
    div:nth-child(2) {
      background-color: green;
    }
    div:nth-child(1):hover {
      transform: rotate(60deg);
    }
    div:nth-child(2):hover {
      transform: rotate(-90deg);
    }

4.scale()缩放函数

• transform:scale()缩放函数中的参数是以倍数为基础的，1代表当前大小
• 1以上的“正数”为当前大小的倍数。
• 1以下 0以上的“正数”为缩小的倍数。
• 0倍为消失
• 当参数值为负值的时候，元素进行镜面翻转，同样倍数会起作用

    div {
      width: 100px;
      height: 100px;
      color: #fff;
      text-align: center;
      line-height: 100px;
      transition: 1s;
    }
    div:nth-child(1) {
      background-color: red;
    }
    div:nth-child(2) {
      background-color: green;
    }
    div:nth-child(3) {
      background-color: blue;
    }
    div:nth-child(4) {
      background-color: pink;
    }
    div:nth-child(5) {
      background-color: seagreen;
    }
    div:nth-child(6) {
      background-color: purple;
    }
    div:nth-child(7) {
      background-color: orangered;
    }
    div:nth-child(1):hover {
      transform: scale(2);
    }
    div:nth-child(2):hover {
      transform: scale(0.3);
    }
    div:nth-child(3):hover {
      transform: scaleX(0.3);
    }
    div:nth-child(4):hover {
      transform: scaleY(2);
    }
    div:nth-child(5):hover {
      transform: scaleX(-1);
    }
    div:nth-child(6):hover {
      transform: scaleY(-1);
    }
    div:nth-child(7):hover {
      transform: scale(-2);
    }

5.skew()倾斜扭曲函数

• transform:skew()在2d变换中倾斜可以有X轴和Y轴的倾斜角度
• 填写旋转角度，deg单位为旋转角度，角度可以为正值或负值。
• skew()默认为X轴倾斜函数

 div {
      width: 100px;
      height: 100px;
      color: #fff;
      font-size: 18px;
      text-align: center;
      transition: 1s;
    }
    div:nth-child(1) {
      background-color: red;
    }
    div:nth-child(2) {
      background-color: green;
    }
    div:nth-child(3) {
      background-color: blue;
    }
    div:nth-child(4) {
      background-color: pink;
    }
    div:nth-child(5) {
      background-color: seagreen;
    }
    div:nth-child(1):hover {
      transform: skewX(45deg);
    }

    div:nth-child(2):hover {
      transform: skewX(-45deg);
    }
    div:nth-child(3):hover {
      transform: skewY(45deg);
    }
    div:nth-child(4):hover {
      transform: skewY(-45deg);
    }
    div:nth-child(5):hover {
      transform: skew(45deg);
    }

7.变换函数的执行顺序

当变换属性需要叠加使用时，不可以生明多个transform属性，而是需要把所有要使用的变换函数添加在一个transform属性中，用空格分隔。但存在前后顺序问题。

例子：

/*用控制台改变旋转角度看效果*/
div:nth-child(1):hover{
transform:translateX(200px) rotate(60deg);
}
/*用控制台改变旋转角度看效果*/
div:nth-child(2):hover{
transform:rotate(60deg) translateX(200px);
}

8.基点

• transform-origin 属性是可以改变元素变化时的原点
• 在变化中，任何元素都有一个中心原点。默认情况下，元素的中心原点位于x轴和y轴的50%处。
• transform-origin属性取值有两种：一种是“长度值”；另外一种是“关键字”。
• 当取值为长度值时，单位可以为px、em和百分比等。

    body>div {
      width: 200px;
      height: 200px;
      font-size: 50px;
      color: #fff;
      float: left;
      margin: 100px;
      transition: 1s;
    }
    .box1 {
      background-color: red;
    }
    .box1:hover {
      transform: rotateZ(60deg);
    }
    .box2 {
      background-color: blue;
      transform-origin: top left;
    }
    .box2:hover {
      transform: rotateZ(60deg);
    }

9.3D变化效果

(1)透视

• perspective属性定义透视距离，距离为长度单位
• 模拟人眼睛到3D变化元素之间的距离
• 透视距离只能定义在3D变化的父元素上

(2)旋转函数x轴和y轴

• transform:rotateX(deg);x轴旋转
• transform:rotateY(deg);y轴旋转

    .box {
      width: 600px;
      margin: 100px auto;
      height: 400px;
      /* 父级给透视,距离越小感觉离自己越近 */
      perspective: 200px;
    }
    .box > div {
      width: 200px;
      height: 200px;
      font-size: 50px;
      color: #fff;
      text-align: center;
      float: left;
      margin: 50px ;
    }
    .x {
      background-color: red;
      transform: rotateX(60deg);
    }
    .y {
      background-color: blue;
      transform: rotateY(60deg);
    }

(3)rotate3d()函数

• transform:rotate3d(x轴矢量,y轴矢量,z轴矢量,角度);前三个值，设置的是矢量的方向，最后一个是 角度deg方向，最后一个是 角度deg
• 0是不参与旋转的轴
• xyz可以为数值

   .box {
      width: 200px;
      margin: 100px auto;
      height: 400px;
      /* 父级给透视,距离越小感觉离自己越近 */
      perspective: 200px;
    }
    .box > div {
      width: 200px;
      height: 200px;
      font-size: 50px;
      color: #fff;
      text-align: center;
      float: left;
      background-color: red;
      transform: rotate3d(1,0,1,60deg);
    }

二十五、动画

1.关键帧

@keyframes 是css中的@规则，通过在动画序列中定义关键帧的样式，来控制CSS动画序列中的步骤。

【例子】

@keyframes move{
/*样式列表*/
 0%{
  transform:translate(0);
 }
 100%{
  transform:translate(600px);
 }
}

2.动画名称

• animation-name属性就是指定动画要使用哪一个关键帧。
• 只有动画名称还是无法运动，需要时间的配合

【例子】

div{
width:100px;
height:100px;
background-color:red;
/*这个元素使用关键帧*/
animation-name:move;
}
@keyframes move{
0%{transform:translate(0);}
100%{transform:translate(600px);}
}

3.动画持续时间

animation-duration属性代表一个动画周期的时长，单位为秒(s)或者毫秒(ms)，默认值0秒。

例子

div{
/*这个元素使用关键帧*/
animation-name:move;
/* 动画时长 */
animation-duration: 1s;
}
@keyframes move{
0%{transform:translate(0);}
100%{transform:translate(600px);}
}

4.动画的运动方式

animation-timing-function动画的运动方式

• ease;默认
• ease-in;
• ease-out;
• ease-in-out;
• linear;
• steps(数值, 定位) 定位：start/end 默认end指逐步运动

【例子】

div{
width:30px;
height:30px;
margin:20px auto;
animation-name:zhuan;
animation-duration:1s;
}
@keyframes zhuan{
0%{}
100%{transform:rotate(360deg);}
}
.a1{animation-timing-function:linear;}/*平滑的旋转*/
.b1{animation-timing-function:linear;}/*平滑的旋转*/
.a2{animation-timing-function:steps(4);}/*断续旋转分4段*/
.b2{animation-timing-function:steps(8);}/*断续旋转分8段*/

4.动画的延迟时间

animation-delay动画的延迟时间
例子：

div{
/*这个元素使用关键帧*/
animation-name:move;
/* 动画时长 */
animation-duration: 1s;
/* 运动方式 */
animation-timing-function: linear;
/* 动画延迟时间 */
animation-delay: 2s;
}

6.动画的运行次数

• animation-iteration-count 规定动画被播放的次数，默认1。
• 指定一个数字，没有单位，定义播放多少次动画
• infinite指定动画应该播放无限次（永远）

7.结束状态

在动画运行到某个位置的时候，动画停止，元素会迅速回到起始位置

• animation-fill-mode:设置动画结束时盒子的状态
• 属性值：forwards保持动画结束后的状态
• 属性值：backwards动画结束后回到最初的状态

例子：足球停留在门前

.ball{
width:50px;
position:absolute;
top:50%;
left:50%;
animation-name:move;
animation-duration:2s;
/*没设置结束状态，会回到最初的状态*/
animation-fill-mode:backwards;/*默认*/
animation-fill-mode:forwards;/*保持结束时状态*/
}

8.动画化执行顺序

animation-direction属性是动画的执行顺序

• 属性值：normal 正向，默认值
• 属性值：reverse 反向

例子：猴塞雷增加反向

.hsl {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: move;
  animation-duration: 2s;
  /* 动画执行顺序 -反向*/
  animation-direction: reverse;
}

9.简写方式

例子：猴塞雷简写

animation: 2s 3s move linear 1 forwards reverse;

• animation: 动画执行时间 延迟时间 执行关键帧名称 运动方式 运动次数 结束状态;
• 最简方式 animation: 动画执行时间 执行关键帧名称;

<div class="box">
    <div class="fish"></div>
  </div>

10.动画停止

• animation-play-state属性规定动画是否正在运行或暂停。
• 属性值：running 运动的，默认值
• 属性值：paused 暂停的

例子：

.box:hover .hsl {
  animation-play-state: running;
  animation-play-state: paused;
  background-color: blue;
}

例子：无缝滚动

ul{
display:flex;
margin:0;
padding:0;
list-style:none;
/*调用动画*/
animation:6s move infinite linear;
/*宽度是父级的两倍*/
width:200%;
}