H5C3--05章

动画的添加

• 如何创建动画？

@keyframes 动画的名字 {
	
}

花括号内部利用百分比的形式设置动画的状态
动画的百分比是针对于动画的总耗时的

• 如何使用动画？
  • animation-name：值为动画的名字
  • animation-duration：设置动画的总耗时
  • animation-iteration-count：设置动画的播放次数，可以是一个具体数值，或者也可以设置infinite无限次播放
  • animation-direction：alternate，设置动画为交替动画
  • animation-delay：设置动画的延迟时间
  • animation-fill-mode：设置动画的起始或者结束状态
    • forwards：会保留结束状态
    • backwards：时刻准备着开始的状态
    • both：相当于同时设置forwards、backwards
  • animation-timing-function：设置动画运动的速度
  • animation-play-state：设置动画是播放还是暂停
    • running：播放
    • paused：暂停
• 动画的缩写： animation: moveTest 2s linear 0s infinite alternate both;
  • 第一个参数：动画的名字
  • 第二个参数：动画的耗时
  • 第三个参数：动画的速度函数
  • 第四个参数：延迟时间
  • 第五个参数：播放次数
  • 第六个参数：交替动画
  • 第七个参数：设置动画的起始的状态

字体图标的使用

• @font-face：可以声明一个自定义的字体名字
• 字体图标的使用方式根据文档的提示步骤一步一步去写即可
• 图片以图标的形式呈现以及控制，可以利用font-size控制大小，并且不会失真，通过color控制颜色

多列布局

• column-count：设置当前的内容以几列的形式展现
• column-rule：设置列与列之间的边框的样式
• column-gap：设置列与列之间的间距
• column-width：设置列宽
• column-span：设置跨列显示，但是只有1和all

伸缩布局

flex布局 = 伸缩布局

伸缩布局就是flex布局，能够更轻松有效的操作、调整容器的布局方式

设置伸缩布局需要先将父元素开启伸缩布局，display:flex，子元素变成块元素，并且会有浮动的效果

开启伸缩布局后的效果，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效，并且默认不换行，如果子元素的宽度超过了父元素的宽度，自动缩放

• 横轴：设置子元素水平排列的方式

• 纵轴：设置子元素垂直排列的方式

• 默认主轴：横轴

• justify-content 设置子元素主轴的排列方式

  • flex-start：设置所有的子元素从开始的位置进行排列
  • flex-end：设置所有的子元素总从结束的位置开始排列
  • center：设置所有的子元素居中显示
  • space-between：两边贴边对齐，中间的平均分配
  • space-around：两边不贴边，所有的子元素都是平均分配，视觉上元素中间间距是两边的2倍。
  • space-evenly: 两边不贴边，视觉上元素中间和两边间距平均分配。

• flex-wrap

  • wrap：换行
  • nowrap：不换行显示
  • wrap-reverse：换行并且翻转

• flex-direction

  • row：设置主轴为横轴，水平排列
  • row-reverse：设置主轴为横轴，并且翻转显示
  • column：主轴是纵轴
  • column-reverse：主轴是纵轴，并且翻转

• flex-flow：同时设置换行和主轴的设置

• flex-grow属性用于设置或检索弹性盒子的扩展比率（如果子盒子没有占满父盒子，设置子盒子占据剩余空间的比例） 本身的宽度+剩余的空间占据的比例值

• flex-shrink属性用于设置或检索弹性盒子的缩放比率

  • flex-shrinkwidth/所有的flex-shrinkwidth并且累加*超出的部分

• flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间（如何设置子元素的占据的宽度）

• flex是设置父元素剩余空间占据的比例

• align-items 设置所有子元素在侧轴（默认纵轴）方向的排列方式（单行用）

  • center：在侧轴居中
  • flex-start：在侧轴的起始位置
  • flex-end：在侧轴的结束位置
  • stretch：会将子元素进行拉伸填满，不能设置height
  • baseline：设置文本基线对齐

• align-content（多行）

  • space-between
  • space-around

• align-self 属性同上 设置当前的子元素

利用flex实现任意元素居中显示

设置主轴居中和侧轴居中

 justify-content: center;
 align-items: center;