08sprite图，定位

08

sprite精灵图

精灵图，又叫 sprite (雪碧图)

他是把在项目开发当中所有用到的小图标拼合到一个图片上，这样在项目加载的时候，一次性的把小图标请求到客户端，减少了http请求，减轻服务器的压力提高了服务器效率

认识定位

原理：定位的元素超出文档流

    什么时候需要用到定位？
    在同一块文档流的区域内，同时叠放多个标签

    定位的流程：
    1.通过 position 属性是设置定位的参照物
    2.通过 方位属性，设置具体方位的定位数据，方位属性 top,left,right,bottom,他是用来设置距离参照物有多远

    他们的优先级是 left > right
                  top > bottom

    position 属性的值
        static relative absolute fixed
    static：静态定位，无参照物，不定位
    relative：相对定位，以 元素本身没有移动之前的位置为参照物
    absolute：绝对定位，以 当前元素的第一个具有定位属性的祖先级元素 为 参照物，作为参照物的祖先级元素必须具有
        position:relative 或者position:absolute 设置
    如果没有定位的祖先级属性，则参照物是 body
    fixed：固定定位，相对于浏览器窗口定位

定位的特点

相对定位的特点：

    1.相对定位是基于元素原来的位置进行定位
    2.元素设置相对定位以后，对元素本身没有任何影响
    3.元素设置了相对定位以后，虽然元素脱离文档流，但是元素本身的位置依然占据文档流的空间
    4.相对定位的元素，天然的提升层级，比没有定位的元素层级高
    5.相对定位的元素，可以通过 left top bottom right 改变元素的位置

绝对定位的特点：

    1.设置了绝对定位的元素，会脱离文档流，不占据文档流空间，并且提升层级
    2.行元素设置完绝对定位以后，可以设置宽高，可以设置上下padding和上下margin，如果不设置宽高，宽高由内容撑开
    3.块元素设置绝对定位以后，自动的margin消失，如果不设置宽高，宽高由内容撑开
    4.绝对定位是相对于他的第一个具有定位属性的祖先级元素进行定位，如果不存在这样的祖先级元素，则相对于 document(文档)定位。具有定位属性的祖先级元素，一般需要有 relative 和 aboxlute 其中的一个定位属性
    5.一般的，如果设置了绝对定位，那么他的父元素需要有一个固定的高

固定定位的特点

    1.固定定位相对于浏览器窗口定位
    2.固定定位脱离文档流