掌握选择器的优先级，以及学习用动画，过渡，变形等设置动画效果

优先级
important
权重
顺序

	.content > div.one.two{ 			0031
		color:teal;
	}
	.content > div:first-child{		0021
		color:red ;
	}
	.content > div:nth-child(1){ 	0021
		color:orange;
	}
	.content > div.one{ 					0021
		color:pink;
	}
	#box {												0100
		color:blue;
	}

	<div class="content">
		<div class="one first" id="box">box</div>
		<div></div>
	</div>

9. 动画

   1. 定义动画帧

       @keyframes 动画名称 {
       	from {
       		left:0;
       	}
       	to {
       		left:1600px;
       	}
       }
       =》
       @keyframes 动画名称 {
       	0% {
       		left:0;
       	}
       	...
       	100% {
       		left:1600px;
       	}
       }
      

      2. 引用动画

          animation-name:				
          动画名称
         animation-duration:3s;
          一次动画持续时间
          animation-iteration-count	
          2/infinite
          动画重复的次数
          animation-timing-function
          动画运动的速度
          linear/steps()
          animation-fill-mode 
          动画最后一帧的填充样式
          forwards
          backwards
          both ?
          animation-direction
          动画方向
          alternate-reverse
          reverse
          alternate
          animation-delay: 
          延迟
          animation-play-state:
          动画状态
           running;
         

      3. 第三方css动画库
         animate.css
         如何应用第三方库css/js【iconfont fontawesome animate.css】：
         1. 模块用 npm install xxx
         2. 本地下载 animate.css/iconfont.css
         3. cdn 别人吧代码管理在别人的服务器（cdn）上,我们在线应用

          https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css
          https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css
         

10. 变 形
    transform:变形函数;
    变形函数：

     缩放    
    scale(2)
    旋转
    rotate(45deg);
    rotateX(45deg);
    rotateY(45deg);
    rotateZ(45deg);
    倾斜
    skew(45deg)
    skewX(45deg)
    skewY(45deg)
    移动
    translate(300px)
    translateX(300px)
    translateY(300px)
    

11. 过渡

    transition
    transition-property					属性
    transition-duration					持续时间
    transition-timing-function 	时间曲线函数
    
    transition与animation的区别：
    1) transition表示某些属性的过渡
    	
    	width:100px;
    	width:200px;
    	width:100px -> 200px 过渡
    		transition-property:width;
    		transition-duration:2s;
    		transition-timing-function:linear;
    	不需要定义关键帧
    

2. transition用于表示简单的动画，需要触发（:hover）

11. 媒体查询
    不适用于大型的电商网站
    适用于网页html结构相同，但是需要在不同设备上显示不同的布局
    @media

    			京东商城						newbalance中国商城
    

    pc index_pc.html index.html
    pad index_pad.html index.html
    phone index_phone.html index.html
    ||
    针对不同终端显示不同布局

    you.163.com
    过滤：
    判断用户设备
    -重定向->
    pc you.163.com index_pc.html
    mobile m.you.163.com index_mobile.html

    newbalance.com.cn/
    样式自适应各种屏幕

    第三方响应式布局框架：
    bootstrap3
    布局(float)
    bootstrap4
    布局(flex)
    使用：
    1) 获取bs(了解)

    	https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
    
    	https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css