【前端笔记】CSS学习简单记录

CSS作用是什么

网页实际上是一个多层的结构，通过CSS可以分别为网页的每一层设置样式，CSS的作用就是用来设置网页中元素的样式

CSS怎么用

有三种方式可以使用CSS，不过我们一般使用的都是外部样式

1. 内联样式表:
   在元素标签中通过style属性来设置样式(不推荐)
   问题:(1)修改麻烦,(2)不可复用,(3)只能对单个标签生效
2. 内部样式表:
   在head标签内部的style标签中设置各种样式(不常用)
   好处:通过CSS选择器可以对多标签生效
   问题:只能单页面，不能跨页面复用
3. 外部样式表:
   在CSS文件中写样式代码，然后通过link标签引入
   好处:(1)可多页面，可复用，(2)可通过CSS选择器对多标签生效,(3)通过外部CSS文件引入，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户体验

CSS基础

CSS基础语法

选择器{声明块}
选择器:通过选择器可以选中页面中的指定元素
声明块:用来指定需要设置的具体样式，由键值对组成(样式名:样式值;)，注:名和值以:连接，以;结尾

CSS选择器

选择器练习网站：CSS Diner

常用选择器

1. 元素选择器
   作用:根据标签名来选中指定的元素
   语法:标签名{}
   示例:p{} h1{} div{}
2. id选择器
   作用:根据元素id属性值选择指定元素
   语法:#id属性值{}
   示例:#box{} #test{}
3. 类选择器
   作用:根据元素class属性值选择指定元素
   语法:.class属性值{}
   示例:.test{} .abc{}

复合选择器

作用:将多个选择器合到一起使用

1. 交集选择器
   作用:选中同时符合多个条件的元素
   语法:选择器1选择器2选择器3...选择器n{}
   示例:div#box.abc.test{}
   注意:交集选择器中如果有元素选择器，必须以元素选择器开头
2. 并集选择器
   作用:同时选中多个选择器对应的元素
   语法:选择器1,选择器2,选择器3...选择器n{}
   示例:p,.abc,.test{}

关系选择器

1. 父元素(暂无选择器)
2. 子元素选择器
   作用:选中指定父元素的指定子元素
   语法:父元素>子元素{}
   示例:div>.abc{}（这里.abc是div的子元素）
3. 祖先选择器(暂无选择器)
4. 后代选择器
   作用:选择指定元素内的指定后代元素
   语法:祖先 后代{}
   示例:div .abc{}（这里.abc是div的后代元素）
5. 兄弟选择器(有两种)
   第一种作用:选择紧挨着的下一个兄弟元素
   第一种语法:兄弟+下一个兄弟{}
   第一种示例:#box+.abc{}
   第二种作用:选择下面的所有兄弟元素
   第二种语法:兄弟~兄弟{}
   第二种示例:#box~div{}

属性选择器

1. [属性名]选择含有指定属性的元素
2. [属性名=属性值]选择属性值等于指定值的元素
3. [属性名^=属性值]选择属性值以指定值开头的元素
4. [属性名$=属性值]选择属性值以指定值结尾的元素
5. [属性名*=属性值]选择属性值中含有指定值的元素

伪类选择器

作用:选中特殊的类
例如:第一个子元素、被点击的元素、鼠标移入的元素…
语法:伪类一般用:开头
示例

1. :first-child第一个子元素
2. :last-child最后一个子元素
3. :nth-child(参数)选中第参数个子元素
   参数特殊值:
   n 第n个，n的范围是0到正无穷
   2n或even表示选中偶数位的元素
   2n+1或odd表示选中奇数位的元素
4. :first-of-type第一个同类型子元素
5. :last-of-type最后一个同类型子元素
6. :nth-of-type(参数)选中第参数个同类型子元素
7. 超链接的伪类
   a:link用来表示没访问过的链接
   a:visited用来表示访问过的链接
   注意:由于隐私原因，visited这个伪类只能修改链接的颜色

伪元素

作用:用来表示页面中一些特殊的并不真实存在的元素(特殊的位置)
语法:伪元素使用::开头
示例

1. ::first-letter 表示开头第一个字母
2. ::first-line 表示第一行
3. ::selection 表示被鼠标选中的内容
4. ::before 表示元素的开头位置
5. ::after 表示元素的最后位置
   注意:before和after必须结合content属性来使用，并且content属性的内容是没法选中的

CSS样式的继承

CSS默认会将元素的样式应用到后代元素上
利用继承我们可以将一些通用的样式设置到共同的祖先元素上
这样只要设置一次即可让所有元素都具有该样式
注意:不是所有的样式都会被继承
例如:背景相关，布局相关等这写样式都不会被继承

选择器权重(优先级)

发生样式冲突时，由选择器的权重(优先级)决定
权重高低:

内联样式>id选择器>类和伪类选择器>元素选择器>通配符选择器(*)>继承的样式(继承的样式没有优先级)

在比较优先级时，需要将所有选择器的优先级相加，优先级越高就越先显示
优先级计算后如果相等，则优先使用靠下的元素
可以在样式后加!important，此时该样式优先级会最高，甚至超过内联样式(开发中慎用！)

长度单位

1. 像素
   屏幕实际上是由像素构成的，不同屏幕的像素大小不同，像素越小的屏幕显示效果越清晰，所以同样的200px在不同的设备下显示效果不一样
2. 百分比
   也可以将属性值设置成相对于其父元素的百分比，设置百分比可以使子元素跟父元素的改变而改变
3. em
   em是相对于元素的字体大小来计算的，即 1em=1font-size
4. rem
   rem是相对于根元素(html)的字体大小来计算的

颜色单位

1. 在css中可以直接使用颜色名来设置颜色，但是不方便
2. RGB值:(光的三原色)
   R:red,G:green,B:blue
   示例:background-color:rgb(0,0,255);
3. 十六进制的RGB值:
   语法:#红绿蓝
   颜色浓度通过0-ff
   如果颜色两位重复可以进行简写
   如#aabbcc可以简写成#abc
4. HSL值和HSLA值
   H 色相(0-360)
   S 饱和度(颜色的浓度0%~100%)
   L 亮度(颜色的亮度0%~100%)
   A 透明度(0-1)
   示例:background-color:hsl(360,0%,50%);

文档流(normal flow)

网页是一个多次的结构，通过css可以分别为每一次设置样式，但作为用户来讲只能看到最顶上的一层，在这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列。
对我们来说，元素主要有两个状态:

1. 在文档流中
   块元素和行内元素的特点如下
   块元素:

1.块元素在页面中独占一行
2.默认宽度是父元素的全部(会把父元素撑满)
3.默认高度是被内容撑开(子元素)

行内元素

行内元素不会独占页面的一行，之占自身的大小
行内元素在页面中从左向右水平排列，如果一行不够容纳，就从下一行继续从左向右排

2. 不在文档流中（脱离文档流）

盒模型

CSS页面中将所有的元素都设置为一个矩形的盒子模型，将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置，每一个盒子都由以下几个部分组成(由里向外)

1. 内容区(content)
   width设置内容区宽度
   height设置内容去高度
2. 内边距(padding)
   内边距的设置会影响盒子大小
3. 边框(border)
   边框宽度border-width会影响盒子大小
   border-width值的情况:
   4个值:上 右 下 左
   3个值:上 左右 下
   2个值: 上下 左右
   1个值: 上下左右
4. 外边距
   外边距不会影响盒子可见区域大小，但是会影响盒子位置

盒子水平布局

1. 元素在其父元素中水平方向的位置由以下几个属性共同决定
   1.margin-left,
   2.border-left,
   3.padding-left,
   4.width,
   5.padding-right,
   6.border-right,
   7.margin-right
2. 一个元素在其父元素中，水平布局必须满足:
   上面7个属性的和=其父元素内容区宽度
   如果不满足，即等式不成立，就称为过度约束，等式会自动调整
   如果这7个值中没有为auto的情况，则浏览器会自动调整margin-right值以使等式成立
   这7个值中有三个值可以设置为auto
   1.width
   2.margin-left
   3.margin-right

盒子垂直布局

默认情况下，父元素的高度被内容撑开，写了父元素高度的情况下，就是父元素的高度，子元素的高度如果超过父元素的高度，那么子元素会溢出
使用overflow属性来设置父元素处理溢出的子元素

overflow属性可选择:
visible:默认值，子元素会从父元素溢出，在父元素外部显示
hidden:溢出内容将会被裁剪不显示
scroll:生成两个滚动条，通过滚动条来查看完整内容
auto：根据需要生成滚动条
overflow-x属性:单独处理水平方向溢出
overflow-y属性:单独处理垂直方向溢出

盒子模型外边距折叠

相邻垂直方向外边距会发生折叠现象

1. 兄弟元素
   兄弟元素间的相邻垂直外边距会取两者之间的较大值
   特殊情况:

如果相邻的外边距一正一负，则取两者的和
如果相邻外边距都是负值，则取绝对值较大的

兄弟元素之间的外边距重叠，对开发是有利的，所以我们不需要处理
2. 父子元素
父子元素相邻外边距，子元素的会传递给父元素(上外边距)
父子外边距的折叠会影响到页面的布局，必须要进行处理
可以通过父元素的padding来进行调整(不常用)
可以通过父元素的border来进行调整(不常用)

行内元素的盒子模型

1. 行内元素不支持设置宽度高度
2. 行内元素可以设置padding,broder,margin，但是垂直方向padding,broder,margin不会影响页面的布局
3. display用来设置元素显示的类型
   可选值:
   inline 将元素设置为行内元素
   block 将元素设置为块元素
   inline-block 将元素设置为行内块元素
   特点:既可以设置宽度和高度，又不会独占一行
   缺点:同时有行内和块的缺点，元素与元素之间会多出空格间隙
   table 将元素设置为一个表格
   none 元素不在页面中显示，并且不占据页面位置
4. visibility用来设置元素的显示状态
   可选值:
   visible 默认值，元素在页面中正常显示
   hidden 元素在页面中隐藏不显示，但是依然占据页面的位置

盒子的尺寸

默认情况下，盒子可见框大小由内容区、内边距和边框共同决定
box-sizing属性，用来设置盒子尺寸的计算方式(设置width和height的作用)
可选值:
content-box 默认值，高度和宽度用来设置内容区的大小
border-box 宽度和高度用来设置整个盒子可见框的大小，即width和height指的是内容区和内边距和边框的总大小

轮廓和圆角

1. outline用来设置元素的轮廓线，用法和border一样
2. box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局

第一个值:左侧偏移量 正右负左
第二个值:垂直偏移量 正下负上
第三个值:阴影的模糊半径
第四个值:阴影的颜色

3. border-radius:用来设置圆角，圆角设置圆的半径大小

四个值: 左上 右上 右下 左下
三个值: 左上 右上左下 右下
两个值: 左上右下 右上左下
一个值: 左上右上右下左下
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius

浏览器的默认样式

通常情况下，浏览器都会为元素设置一些默认样式
默认样式的存在会影响到页面的布局
通常可以引入重置css文件和统一css文件来去除默认样式

浮动(float)

通过浮动可以使一个元素向其父元素的左侧或右侧移动
使用float属性来设置子元素的浮动

可选值:
none 默认值，元素不浮动
left 元素向左浮动
right 元素向右浮动

注:元素设置浮动以后，水平布局的等式便不需要强制成立
元素设置浮动以后，会完全从文档流中脱离，不再占用文档流中的位置，所以元素下边的还在文档流中的元素会自动向上移动

浮动的特点

1. 浮动元素会完全脱离文档流，不再占据文档流中的位置
2. 设置浮动后，元素会向父元素的左侧或右侧移动
3. 浮动元素默认不会从父元素中移出
4. 浮动元素向左或向右移动时，不会超过它前面的其他浮动元素
5. 如果浮动元素的上边是一个没有浮动的块元素，则元素无法上移
6. 浮动元素不会超过它上边浮动的兄弟元素，最多和它一样高
   简单总结:

浮动目前来讲主要作用就是让页面中的元素可以水平排列
通过浮动可以制作一些水平方向的布局

浮动的其他特点:
浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果

脱离文档流的特点

1. 块元素:
   块元素不再独占一行
   脱离文档流后，块元素的宽度和高度默认都会被内容撑开
2. 行内元素:
   行内元素脱离文档流以后会变成块元素，特点和块元素一样
   脱离文档流以后，不需要再区分块和行内了

高度塌陷的问题以及解决方案

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素会从文档流中脱离，将会无法撑起父元素的高度
父元素丢失高度以后，其下的元素会自动上移，导致页面布局混乱，所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理。

BFC(Block Formatting Context)块级格式化环境
BFC是CSS中的一个隐含的属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区域
元素开启BFC后的特点:
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
可以通过一些特殊方式来开启BFC:
1.设置元素的浮动 float:left(副作用大，不推荐)
2.将元素设置为行内块元素display:inline-block(副作用大，不推荐)
3.将元素的overflow设置为一个非visible的值
常用的方式为元素设置overflow:hidden 开启其BFC,使其可以包含浮动元素

clear属性

作用:清除浮动元素对当前元素所产生的影响
可选值:

left清除左侧浮动元素对当前元素的影响
right清除右侧浮动元素对当前元素的影响
both清除两侧中最大影响的那一侧

原理:
设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响

高度塌陷问题的最终解决方案

在父元素加::after伪元素:

.box::after{
  content:'';
  display:block;
  clear:both;
}

clearfix解决外边距重叠的问题以及高度塌陷的问题

.clearfix::before,.clearfix::after{
  content:'';/*解决外边距重叠*/
  display:table;/*解决外边距重叠，解决高度塌陷*/
  clear:both;/*解决外边距重叠，解决高度塌陷*/
}

position定位

定位是一种更加高级的布局手段
通过定位，可以将元素摆放到页面的任意位置
使用position属性来设置定位
可选值:

1. static默认值，元素是静止的没有开启定位
2. relative开启元素的相对定位

相对定位的特点:
1.元素开启相对定位后，不设置偏移量不会发生任何变化
2.相对定位是参照于元素在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质(块还是块，行内还是行内)

3. absolute开启元素的绝对定位

绝对定位的特点:
1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
2.开启绝对定位后，元素会脱离文档流
3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
4.绝对定位会使元素提升一个层级
5.绝对定位元素是相对于其包含块进行定位的
(包含块默认是开启定位的最近一级祖先元素，如果祖先元素都没开定位，则相对于根元素进行定位)

4. fixed开启元素的固定定位
   固定定位也是一种绝对定位，大部分特点和绝对定位相同，唯一不同的是固定定位永远参照于浏览器的视口进行定位(浏览器的可视区域)
5. sticky开启元素的粘滞定位
   粘滞定位和相对定位特点一致，不同的是粘滞定位可以在元素达到某个位置时将其固定
   缺点:兼容性不好(不常用)

元素的层级

开启了定位的元素，可以通过z-index属性来指定元素层级
值越大，层级就越高，层级相同，优先显示靠下的元素，层级再高也不会盖住后代元素

字体

1. color 设置字体颜色(严格意义上讲，color属于前景色)
2. font-size 字体大小
   (相关单位em:相当于当前元素的font-size,rem:相当于根元素的font-size)
3. font-family字体族(字体的格式),通常会写很多值，字体名字之间由空格的要加引号
   可选值:

serif 衬线字体 字体有修饰
san-serif 非衬线字体(比较正，线横平竖直)
monospace 等宽字体(字母之间宽度是一样的)
cursive 草书字体 有点像艺术字
fantasy 虚幻字体

font-family可以同时指定多个字体，多个字体用,隔开，字体生效优先自动使用第一个，第一个无法使用就用第二个，以此类推

4. font-face 可以将服务器中的字体直接提供给用户使用(注意侵权问题)

@font-face{
  font-family:;
  src:url();
}

5. 字体格式问题:
   需要注意字体格式和浏览器是否兼容（很少写）
   woff
   woff2
   truetype
   opentype
   embedded-opentype
   svg

6. 图标字体
   在网页中经常要使用一些图标，可以通过图片来引入图标
   但是图片大小本身比较大，而且非常不灵活
   所以在使用图标时，我们还可以将图标直接设置为字体
   然后通过font-face的形式对字体进行引入
   这样我们就可以通过使用字体的形式来使用图标
   推荐网站:fontawesome/iconfont

- 下载图标字体库
- css和webfonts放到项目中就行
- 将all.css引入到网页中
- 使用图标字体
- 直接通过类名来使用图标字体
免费的类主要有fas、fab这两个，示例如下
<i class = "fas fa-bell"></i>
- 优点 图标大小可以随便改(font-size)

7. 图标字体的其他使用方式
   引入字体css+webfonts这两个文件
   通过伪元素来使用(content写+图标字体的编码)，需要加font-family
   也可以通过实体来引用 &#x图标编码; 需要有class

8. 字体的简写样式
   font 可以设置字体相关的所有属性
   先字体大小，后字体族
   font:14px ‘Times New Roman’,Times,serif;
   font:14px/1.5 ‘Times New Roman’,Times,serif; 可以用/来加行高
   font:italic bold 14px/1.5 ‘Times New Roman’,Times,serif; 斜体 加粗
   也可以用font-weight来加粗字体
   可选值：
   normal（默认）
   bold 100-900 九个级别(没啥用)
   font-style:字体样式，normal（正常） italic（斜体）

行高line-height

1. 行高指的是文字占有的实际高度
2. 可以通过line-height来设置行高
   行高可以直接指定一个大小(px em),如果是一个整数的话，行高将会是字体的指定倍数
3. 字体框
   字体框就是字体存在的个子，设置font-size实际上就是在设置字体框的高度，行高会在字体框的上下平均分配
4. 可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中
5. 行高经常用来设置文字的行间距(行间距 = 行高-字体大小)

文本的样式

水平对齐text-align

可选值
left 左对齐
right 右对齐
center 居中对齐
justify 两端对齐

垂直对齐vertical-align

可选值
baseline 默认值，基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐

图片对齐也需要用到vertical-align

其他的文本样式

text-decoration(可以指定颜色，但ie不支持)

可选值
none 默认
underline 下划线
line-through 删除线
overline 上划线

white-space设置网页如何处理空白

可选值
normal 正常
nowrap 不换行
  设置了这个可以使用省略号
  需要overflow:hidden
  需要text-overflow:ellipsis
pre保留空白

背景

1. background-repeat
   可选值:

repeat 背景会沿着x轴y轴方向重复 
repeat-x	背景会沿着x轴方向重复
repeat-y	背景会沿着y轴方向重复
no-repeat	背景图片不重复

2. background-position 用来设置背景图片的位置

设置方式:
通过top left right bottom center几个表示方位的词来指定背景图片的位置
  使用方位词时必须要同时指定两个值，如果只写一个的话那么另一个默认center
通过偏移量来指定背景图片的位置:
  水平方向的偏移量 垂直方向的偏移量

3. background-clip 背景图片的范围
   可选值:

border-box 默认值，背景会出现在边框的下边
padding-box 背景不会出现在边框，只出现在内容区和边框区
content-box 背景只会出现在内容区

4. background-origin 背景图片的偏移量计算的原点
   可选值:

padding-box 默认值，background-position 从内边距处开始计算
content-box 背景图片的偏移量从内容区处计算
border-box  背景图片的偏移量从边框处开始计算

5. background-size 背景图片的尺寸

第一个值表示宽度
第二个值表示高度
如果只写一个，则第二个默认是auto
cover 图片的比例不变，将元素铺满
contain 图片的笔记不变，将图片在元素中完整显示

6. background-attachment 设置背景图片是否跟随元素移动
   可选值:

scroll 默认值 背景图片会随元素移动
fixed 背景图片会固定在页面中，不会随元素移动

7. background背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置
   并且该样式没有顺序要求，也没有哪个属性是必须写的
   示例：

background:url() #bfa center center/contain border-box

注意:

background-size必须在background-position后面，并且使用/隔开
background-origin background-clip两个样式，origin要在clip前面

8. 雪碧图
   将图标全放一个图上，通过background-position来切换图标

9. 渐变背景

10. 线性渐变
    background-image:linear-gradient()
    linear-gradient 可选值:

to left
to right
to bottom
to top
deg deg表示度数
turn 表示圈

渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况
平铺渐变效果:
background-image:repeating-linear-gradient()

2. 径向渐变
   background-image:radial-gradient()
   at +两个参数可以设置圆心位置
   background-image:radial-gradient(at center center ,red ,yellow)
   background-image:radial-gradient(at 0 0 ,red ,yellow)
   可以指定渐变的范围(近边，远边,近角，远角)

closest-side
closest-corner
farthest-side
farthest-corner

长表格

可以将一个表格分为三部分:

头部:thead
主体:tbody
底部:tfoot

table的属性

border-spacing指定边框的距离
border-collapse:collapse设置边框的合并

tbody>tr:nth-child(odd)可以选中奇数行
如果表格中没有使用tbody而是使用tr，那么浏览器会自动创建一个tbody，并且tr全部放在tbody里面，tr不是table的子元素
默认情况下，元素在td中是垂直居中的，可以通过vertical-align来设置

表单

1.form的属性
action 表单要提交的地址
2.常用表单项

  <input type="text" name = "username"> 文本框
  <input type="password" name = "password"> 密码框
  <input type="radio" name = "hello"> 单选框
  <input type="checkbox" name = "test"> 多选框
  <select name = "xxx"><option value="i"></option></select> 下拉列表
  <input type="submit" value ="注册"> 提交按钮

animation

过渡transition

通过过渡可以指定一个属性发生变化时的切换方式
通过过渡可以创建一些非常好的效果，提升用户的体验

1. transition-property 指定要过渡的属性(width,height)

- 多个属性用`,`隔开
- 如果所有属性都要过渡，则使用all
- 只要能计算的都可以过渡
- 注意:过渡时必须是一个有效数值向另一个有效数值进行过渡（auto不能）

2. transition-duration 指定过渡效果的持续时间(s和ms)
   指定过渡效果的持续时间 可以对不同的属性指定不同时间(width,height)
3. transition-timing-function 过渡的时序函数

可选值:
- ease 默认值，慢速开始，先加速，再减速
- linear 匀速运动
- ease-in 慢速开始(加速运动)
- ease-out 减速运动+
- ease-in-out 先加速后减速(会比ease快)
- cubic-bezier()来指定时序函数  贝塞尔曲线
  - https://cubic-bezier.com
  - cubic-bezier(.24,.65,.83,.67)
- steps() 分步执行效果
  - steps(2) 分两步执行，会跳两次
  - 可以设置一个第二个值
    end, 在时间结束时执行过渡(默认值)
    start,在时间开始时执行过渡

4. transition-delay 过渡效果的延迟
   等待一段时间后再执行过渡
   transition可以同时设置过渡相关的所有属性
   只有一个要求，如果要写一个延迟，则两个时间中第一个是持续时间

transition:2s margin-left 1s cubic-bezier(.24,.65,.83,.67)	

动画

动画和过渡类似，都是可以实现一些动态的效果
不同的是过渡需要在某个属性发生变化时才会触发
动画可以自动触发动态效果
设置动画效果，必须要先设置一个关键帧，关键帧设置了动画执行每一个步骤

1. 关键帧：

  @keyframes test{
    /*from动画开始的位置，也可以使用100%*/
    from{
      background:red;
      margin-left:700px;
    }
    /*to表示动画结束的位置，也可以使用0%*/
    to{
      background:orange;
      margin-left:0;
    }		
  }
  
  .box2{
    background-color:#bfa
    animation-name:test;
    animation-duration:4s;
    animation-delay:2s;
    animation-timing-function:ease-in-out;
  }

2. animation-iteration-count 动画执行的次数
   可选值:

infinite 无限执行
也可以写一个次数

3. animation-direction 动画执行的方向
   可选值:

- normal 默认值  from 向 to
- reverse 反向执行 to向from
- alternate 从from向to 重复时反向
- alternate-reverse 从to 向from重复时反向

4. animation-play-state:running 设置动画的执行状态
   可选值:

- running 默认值 动画执行
- paused 动画暂停

5. animation-fill-mode动画的填充模式
   可选值:

- none 默认值，动画执行完毕元素回到原来的位置
- forwards 动画执行完毕元素停止在结束的位置
- backwards 动画延迟等待时，元素就会处于开始位置
- both forwards和backwards结合

6. 简写animation 和transition需要注意的一样
   两个时间，第一个持续时间，第二个延迟时间

注意:练习素材 搜素图片: sprite animation
关键帧也可以像下面这样写:

@keyframes ball{
from {
}
20%,60%,to{
}
40%{}
80%{}
}

变形

1. 平移
   变形不会影响到页面的布局
   transform用来设置元素的变形效果

- 平移:
  - translateX() 沿着x轴方向平移
  - translateY() 沿着y轴方向平移
  - translateZ() 沿着z轴方向平移
  - 平移元素，百分比是相对于自身计算的
- 可以通过平移对宽度高度不确定的块进行居中
  - position设置为absolute
  - left:50%
  - top:50%
  - transform:translateX(-50%) translateY(-50%)

调整z轴的位置时，默认情况下网页不支持透视，需要看见效果，必须要设置网页的视距，可以在html里加 perspective视距属性

  html{
  perspective:800px;  (通常视距为600px - 1200px)
}

2. 旋转
   通过旋转可以使元素沿着x y 或 z旋转指定的角度,也要设置视距才能看到效果

- rotateX()
- rotateY()
- rotateZ()
- backface-visibility 设置背面显示隐藏
  - visible
  - hidden

3. 缩放

- scaleX() 水平方向缩放
- scaleY() 垂直方向缩放
- scale()  双方向的缩放
- transform-origin 变形的原点
- transform-origin:20px 20px;

flex(弹性盒、伸缩盒)

- 是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局
- flex可以使元素具有弹性，让元素可以跟随页面的大小改变而改变
- 弹性容器
  - 要使用弹性盒，必须先将一个元素设置为弹性容器
  - 我们通过display来设置弹性容器
    - display:flex 设置块级弹性容器
    - display:inline-flex 设置为行内弹性容器
- 弹性元素
  - 弹性容器的直接子元素是弹性元素(弹性项)
  - 一个元素可以同时是弹性元素和弹性容器
- flex-direction 弹性元素的排列方式
  - 可选值
    - row 默认值，弹性元素在容器中水平排列(左向右)
    - row-reverse 弹性严肃在容器中反向水平排列(右向左)
    - column 弹性元素纵向排列（自上向下）
    - column-reverse 弹性元素纵向排列（自下向上）
  - 主轴
    - 弹性元素的排列方向称为主轴
  - 侧轴
    - 与主轴垂直方向称为侧轴
- 弹性容器的样式
  - flex-wrap:设置弹性元素是否在弹性容器中自动换行
    - 可选值:
      - nowrap 默认值，元素不会自动换行
      - wrap 元素沿着辅轴方向自动换行
      - wrap-reverse 元素沿着辅轴反方向换行
  - flex-flow:row wrap; wrap和direction的简写属性
  - justify-content
    - 如何分配主轴上的空白空间(主轴上的元素如何排列)
    - flex-start 元素沿着主轴起边排列
    - flex-end 元素沿着主轴终边排列
    - center元素居中排列
    - space-around空白分布到元素两侧
    - space-between 空白均匀分布到元素间
    - space-evenly 空白分布到元素的单侧
  - align-items:元素在辅轴上如何对其
    - stretch 默认值，将元素长度设置为相同的值,元素会拉伸
    - flex-start 元素不会拉伸，沿着辅轴起边对齐
    - flex-end 沿着辅轴的终边对齐
    - center 居中对齐
    - baseline 基线对齐
  - align-content:辅轴空白空间的分布
    - flex-start 元素沿着辅轴起边排列
    - flex-end 元素沿着辅轴终边排列
    - center元素居中排列
    - space-around空白分布到元素两侧
    - space-between 空白均匀分布到元素间
    - space-evenly 空白分布到元素的单侧
  - align-self 
    用来覆盖当前弹性元素上的align-items
- 弹性元素的样式
  - flex-grow 弹性的增长系数
  - flex-shrink 弹性的缩减系数
    - 缩减系数的计算方式比较复杂
    - 缩减多少是根据缩减系数和元素大小来计算
  - flex-basis 元素基础长度
    - 指的是元素在主轴上的基础长度
      如果主轴横向，则该值指定的是元素的宽度
      如果主轴纵向，则指定的是元素的高度
      默认值是auto,表示参考元素的自身高度或宽度
      如果传递了一个具体的数值，则以该值为准
  - flex 可以简写弹性元素的三样式
    - flex:增长 缩减 基础;
      - initial "flex:0 1 auto;"
      - auto "flex: 1 1 auto;"
      - none "flex:0 0 auto" 弹性元素没有弹性
  - order 决定弹性元素的排列顺序

- flex推荐在手机端用，不推荐pc端

	/* 弹性元素的属性
		- flex-grow 指定弹性元素伸展的系数
			- 父元素的剩余空间会按比例进行分配
			- 0 不伸展
		- flex-shrink 指定弹性元素的收缩系数
			- 当父元素的空间不足以容纳所有的子元素时，如果对子元素进行收缩
	*/

像素

在前端开发中主要分成两种情况讨论:css像素和物理像素
物理像素:屏幕上一个个发光的小点
css像素:编写网页时，我们所用的就是css像素
我们可以通过改变视口大小来改变css像素和物理像素的比值
在不同的屏幕，单位像素的大小是不同的，单位像素越小屏幕越清晰
大部分情况，智能手机的像素点远远小于计算机的像素点
问题: 一个宽度为900px的网页在iphone6中要如何显示呢？

- 默认情况下，移动端网页都会将视口设置为980px(css像素)
- 以确保pc端网页可以在移动端正常访问，但是如果网页宽度超过980
  移动端的浏览器会自动对网页缩放以完整显示网页
  所以大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有好的体验
  为了解决这个问题，大部分网站都会专门为移动端设计网页

移动端页面

移动端默认的视口大小是980px
默认情况下，移动端的像素比是 980/移动端宽度
如果我们直接在网页中编写移动端代码，这样在980视口下，像素比非常不好
导致网页中的内容非常小
编写移动页面时，必须要确保有一个比较合理的像素比

1 css像素 对应 2 物理像素
1 css像素 对应 3 物理像素

可以通过meta标签来设置视口大小

<meta name="viewport" content="width=100px">

每一款移动设备设计时，都会有一个最佳的像素比
一般我们只需要将像素比调整为该值即可得到一个最佳效果
将像素比设置为最佳像素比视口大小我们称其为完美视口

<meta name="viewport" content="width=device-width">

结论：移动端开发都加上:

<meta name="viewport" content="width=device-width">

移动端视口

1. vw表示的视口宽度(viewport width)

- 100vw = 一个视口的宽度
- 1vw = 1%视口宽度
- vw 这个单位 永远相当于视口宽度进行计算
- vw在pc端兼容性不好，但是在移动端可以放心使用

2. vw适配
   网页中字体大小最小是12px，不能设置一个比12px还小的字体，如果我们设置了一个小于12px的字体，则字体自动设置为12px

响应式布局

- 网页可以根据不同的设备或窗口呈现不同的效果
	- 使用响应式布局，可以使一个网页适用于所有设备
	- 通过媒体查询，可以为不同的设备，或者设备不同状态来分别设置样式
		- @media语法
			@media 查询规则{}
			媒体类型：
				all 所有设备
				print 打印设备
				screen 带屏幕的设备
				speech 屏幕阅读器
				- 也可以使用,连接多个媒体类型，这样它们之间就是或的关系
				@media print,screen{}
			- 可以在媒体类型前加一个only,表示只有，写only主要是为了兼容老版本浏览器
				@media only screen{}
				
- 媒体特性
  - width 视口的宽度(不常用)
  - height 视口的高度(不常用)
  @media(width:500px){
    body{
      background-color:#bfa
    }
  }
  - min-width 视口的最小宽度(视口大于指定宽度时生效)，常用
  - max-width 视口的最大宽度(视口小于指定宽度时生效)，常用
    @media(min-width:500px){
      body{
        background-color:#bfa
      }
    }
  - 样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点发生变化
  - 一般比较常用的断点
    - 小于768 超小屏幕 max-width=768px
    - 大于768 小屏幕 min-width=768px
    - 大于992 中型屏幕 min-width = 992px
    - 大于1200 大屏幕 min-width = 1200px
      @media only screen and (min-width:500px) and (max-width:700px){
        body{
          background-color:#bfa
        }
      }