定位、锚点、精灵图、帧动画详解

1.定位

1.定位 position

                      说法     文档流   偏移位置（top left right bottom）时候的参照物
1.position:static;    默认值    默认值   默认
2.position:absolute;  绝对定位  脱离     a.当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏
                                       b.有父元素且父元素有定位，父元素
3.position:relative;  相对定位  不脱离   自己的初始位置
4.position:fixed;     固定定位  脱离     浏览器当前窗口
5.position:sticky;    粘性定位  可以做吸顶效果，粘性定位是css3.0新增的，兼容不好
​
层叠顺序：
z-index属性是不带单位的，并且可以给负值，没有设置z-index时，最后写的对象优先显示在上层设置后，数值越大，层越靠上

2.相对定位

position:relative;
相对于自己原来位置偏移，偏移后可以覆盖在别的位置，不会脱离文档流还会再原位置占位
可以设置负值

3.绝对定位

基础

position:absolute;
没有父元素或父元素没定位：
                 脱离文档流
                 不占据原位置
                 位置相对于浏览器
有父元素且父元素有定位：
                位置相对于父元素左上角                

深入

水平居中  外边距：0 auto
垂直居中  定位：上面50% 左面50%再用外边距：上面-50% 左面-50%（不能用百分比数值，只能用正数数值）
​
子元素在父元素居中的话外边距只能设置自身的50%，不可设置为父元素的50% 

4.固定位置

position:fixed;
​
会脱离文档流，位置相对于浏览器一直不动

5.粘性定位

position:stycky;
​
固定在一个地方，不管网页如何拉动

6.定位的层级

z-inder值越大，层级越大，越靠上显示
​
可以给负值，也可以给正值

7.定位和浮动的区别

浮动是半脱离，文字会形成环绕效果
定位是全脱离，不会出现文字环绕效

2.图形

1.三角形

border-方位，加边框之后隐藏其他三边
rgba（0，0，0，0）最后一位数值控制透明度
transparent可以直接把边框变透明，但不能调节透明度

3.锚点

锚点作用：页面不同区域的跳转，使用a链接
<a href="#锚点名字"></a>
​
<div id="锚点名字"></div>

4.精灵图

1.将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position；来实现北京图片的定位技术。
2.图片整合的优势：
1)通过图片整合来减少对服务器的请求次数，从而提高面的加载速度。
2）通过整合图片来减小图片的体积。
​

5.过度动画和时间

transition:过度时间；
tranfrom:缩放；

6.帧动画

@keyframes run {
      0% {
        top: 0;
        left: 0;
      }
​
      25% {
        top: 0;
        left: 400px;
      }
​
      50% {
        top: 400px;
        left: 400px;
      }
​
      75% {
        top: 400px;
        left: 0px;
      }
      100% {
        top: 0px;
        left: 0px;
      }
    }
​
​
animation  
​
动画名称  动画执行时间  动画执行速度曲线  动画延迟时间  动画执行次数  动画是否轮流反向运动
animation:run 2s linear 2s 2/infinite(无数次) alternate;
​
动画名称：run  
动画执行时间：2s  
动画执行速度曲线：linear 匀速  
动画延迟时间：2s
动画执行次数：2次  
动画是否轮流反向运动：1
​
1.animation-name 动画名称 是定义关键帧是所定义的动画名称
​
2.animation-duration 动画的执行时间  单位：s/ms
​
3.animation-timing-function 规定动画运动的速度曲线
1.linear 相同的速度从开始到结束，也就是匀速
2.ease  默认值 慢速度开始--速度变快--慢速度结束
3.ease-in 慢速度开始的过渡效果，也就是以低速度开始
4.ease-out 慢速度结束的过渡效果，也就是以低速结束
5.ease-in-out 以慢速度开始和结束的过渡效果
​
4.animation-delay 定义动画何时开始 
           单位：s/ms
            取值
            - 以秒或毫秒计
            - 默认值是 0
         
​
5.animation-iteration-count 动画的执行次数
1.n 默认执行动画次数1次
2.infinite 无限次播放动画
​
6.animation-direction 定义是否应该轮流反向播放动画
1.normal 默认值，正常播放
2.alternate 动画轮流反向播放
3.alternate-reverse 从第一次就反向运动
​
  
                
8.animation-play-state: paused;动画播放方式   暂停
   取值：
 running:运动 
 paused: 暂停
​
​
​
2D位移
语法：
   transform: translate()
    x与y之间用逗号隔开
  - transform: translate(x,y) 沿着x轴和y轴移动
  - transform: translateX(x) 沿着x轴移动
  - transform: translateY(y) 沿着y轴移动
​
  取值:
​
  - px
  - 说明：允许负值，
    垂直正值向下，负值向上
   水平向右为正值，垂直方向向下正值
​
    /* 如果只给一个值，只沿x水平方向移动 */
      transform: translate(-100px);
​
   注意:元素位移之后，原来的位置还在
​
5设置元素的基点位置
transform-origin属性 设置元素的基点位置
​
* transform-origin: 水平方向 垂直方向;
​
* 设置元素的基点位置，设置围绕哪个点进行变化
​
* 取值
    px
​
  关键字
​
       水平：left center right
       垂直：top  center bottom
​
- 说明：
  两个空格隔开的值，分别表示x,y轴的原点
  一个值时，另一个值默认center
- 可为负数
​
> 必须与transform属性配合使用
位移不能用