css（二）

布局：布局的本质就是让块元素在一行中显示

1. 浮动布局（float:left/right）

脱离文档流：
1) 宽度高度默认由内容决定
2) 原先所在位置就会被其他块元素抢占
3) 浮动元素在一行中依次排列，当一行无法容纳的时候会自动换行
应用：
1.1全部浮动（2 列以上）

     ul::after {
				   display:block;
				   content:"";
				   clear:both;
			    }
			    ul> li {
				  float:left;
		     	}
		     	
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>

1.2左侧浮动，右侧不浮动（2列）

			.content > .left{
				float:left;
				width:220px;
			}
			.content > .right {
				margin-left:230px;
			}

			<div class="content">
				<div class="left"></div>
				<div class="right"></div>
			</div>

2.定位布局

2.1 作用：当一个元素悬挂在其他元素之上，优先考虑定位布局
eg: 模态框、下拉菜单、二级菜单、固定宣传栏、网页聊天页面
2.2 用法：position:static/ relative / absolute / fixed / sticky

 static 默认	静态布局，默认文档流中，非定位元素

 relative 	定位元素(相对定位)
				1) 没有脱离文档流
				2) 参照点为当前元素原本的位置

 absolute 	定位元素(绝对定位)
				1) 脱离了文档流
				2) 参照距离当前元素最近的父定位元素，
				如果所有的父元素都没有定位元素，则参照浏览器视口

 fixed 		定位元素(固定定位)
				1) 脱离了文档流
				2) 参照浏览器视口

 sticky 	定位元素(粘滞定位)
				1) 不脱离文档流
				2) relative 和 fixed 的结合
					top:50px
					当当前元素距离浏览器视口顶端为50px的时候，体现fixed的特点

定位元素的特点
可以使用描述当前元素位置的属性 top、right、bottom、left
z-index
参照点
是否脱离文档流

3. 伸缩盒布局

3.1作用：使得子元素在父元素中分列显示，与float的作用类似。一般用于响应1式布局（手机app中）
3.2用法
1. 父元素在主轴上一定要有一个固定的宽/高
2. 子元素在交叉轴上默认宽/高占满父元素
如果主轴为x轴，那么资源的默认高度占满父元素
如果主轴为y轴，那么资源的默认宽度占满父元素

      eg:
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>

			ul {
				display:flex;
			}
			ul 伸缩盒
				1)设置父元素为伸缩盒 (display)
					flex
				2) 主轴 （flex-direction）
					主轴 	默认情况下为x轴 	
						row 【左中右】/column【上中下】
					交叉轴 默认情况下为y轴 
					元素沿着伸缩盒的主轴排列的
				3) 伸缩盒自动换行（flex-wrap）
					子元素宽度和大于父元素的时候是否换行
						nowrap 	默认值，不换行
						wrap 		换行
			li 伸缩盒的元素
				1) 基础值
					flex-basis 	主轴上元素的基础值(宽/高)
				2) 对盈余空间的分配
					flex-grow
				3) 对亏损空间的贡献
					flex-shrink:
				4) 速写
					flex: grow shrink basis;

动画

1.动画定义

		@keyframes 动画名称{
			from {

			}
			to{

			}
		}
		或
		@keyframes 动画名称{
			10% {
				
			}
			20%{

			}
			...
			100%{

			}
		}

2.动画应用

		animation-name:动画名称;
		animation-duration:		    动画持续时间
			5s; 
		animation-delay: 			动画的延迟
			1s
		animation-direction 	    动画运动方向
			reverse                 动画反向播放
			alternate               动画在奇数正向播放，在偶数反向播放
		animation-fill-mode: 	    动画结束后保留哪个样式
			forwards	            保留最后一帧的样式
			backwards               保留第一帧的样式
		animation-iteration-count: 	动画执行的次数
			4
			infinite   无数次
		animation-timing-function: 	动画执行的时间曲线
			linear
			steps
		animation-play-state:   	动画播放状态
			running
			paused
		animation:	
			速写形式 
		animation: 4s linear 0s infinite alternate move_eye

3.第三方动画库（animate.css）

		封装了css3的通用的动画样式，专业
		https://daneden.github.io/animate.css/
		1. 引入动画库
		2. 为元素添加class