第六节盒子模型和盒子模型偏移量

------------------------------------盒子模型常用的八个属性---------------------------------
Js盒子模型
Js盒子模型指的是通过js提供的一系列的属性和方法，获取页面中元素的样式信息值

 client系列(当前元素的私有属性)
 clientWidth/clientHeight:内容的宽度/高度+左右/上下填充，（和内容溢出没有关系）
 clientLeft:左边框的宽度(borderLeftWidth)   
 clientTop:上边框的高度(borderTopWidth)
 //真实的内容宽度和高度其实不是这样的，真实的高度是要把溢出的高度也要加进来

 offset系列
 offsetHeight/offsetWidth:clientWidth/clientHeight+左右边框/上下边框(和内容溢出没有关系)
 offsetParent:当前元素的参照物
 offsetLeft/offsetTop:当前元素的外边框距离父级参照物的偏移量

 scroll系列
  1、内容有溢出
  scrollWidth/scrollHeight 内容没有溢出的情况下和clientWidth/clientHeight一模一样
  2、内容没有溢出：
  如果容器中内容有溢出我们获取的内容以下规则：
  scrollWidth：真实内容的宽度(包含溢出)+左填充
  scrollHeight：真实内容的高度(包含溢出)+上填充
  获取到的结果都是‘约’等于的值,不同的浏览器结果也是不同的，设置overflow: hidden;有影响，在不同的浏览器中我们获取到的结果是不相同的
   scrollLeft/scrollTop滚动条卷去的宽度/高度

   关于浏览器本身盒子模型信息
    clientWidth/clientHeight当前浏览器可视窗口的高度和宽度（一屏）
    scrollWidth/scrollHeight当前页面真实的宽度和高度（所有屏的宽度和高度，是一个约等于的值）
 
    不管是哪些属性，也不管是什么浏览器，不管是设置还是获取，想要兼容都写两套
    获取
    document.documentElement[attr]||document.body[attr]
    设置
    document.documentElement.scrollTop=0;
    document.body.scrollTop=0;

编写一个有关于操作浏览器盒子模型的方法
如果只传递了attr没有传递value，默认的意思是获取样式值
如果两个参数都传递了，意思是设置某一个样式属性值



设置、获取浏览器的宽度和高度
    function win(attr,value){
        if(typeof  value=='undefined'){
              return document.documentElement[attr]||document.body[attr];
        }
        document.documentElement[attr]=value;
        document.body[attr]=value;
}
获取可视宽：win(“clientHeight”)
设置值：win(“scrollTop,0”)

----------------获取元素的具体样式信息值以及Js兼容检测三种方式--------------

以上获取的都是组合样式值，如果想获取某一个具体的属性值两种方式：
1、元素.style.属性名（需要我们把所有的样式写在行内样式才可以）（真实项目中不常用）（无法实现css和html的分离）
2、使用window.getComputedStyle这个方法获取所有经过浏览器计算过的样式（只要当前的元素标签可以在页面中呈现出来，那么它所有的样式都是经过浏览器计算过的，哪怕样式没有写也可以获取到）
window.getComputedStyle  ----->function getComputedStyle()
window.getComputedStyle（当前要操作的元素对象,当前元素的伪类一般写null）
获取的结果是是经过浏览器计算过，是CSSStyleDeclaration这个类的实例，这个实例包含了当前元素的所有样式属性值

Js兼容检测三种方式 1、try catch  使用try catch处理兼容，消耗性能，不得已的情况下使用不是最优的方式
    function getcss(obj, attr) {
        var val = null;
        try {
            val = window.getComputedStyle(obj)[attr];
        } catch (e) {
            val = obj.currentStyle[attr];
        }
        return val;
    }
2、判断浏览器中是否存在这个属性或方法，存在就兼容，不存在就不兼容  （最优）
     function getcss(obj,attr){
         var val=null;
         if("getComputedStyle" in  window){//判断某一个属性是否属于这个对象
             val=window.getComputedStyle(obj)[attr];
         }else{
             val=obj.currentStyle[attr];
         }
         return val;
     }

3、根据浏览器的版本来处理兼容
          function getcss(obj,attr){
             var val=null;
             //判断某一个属性是否属于这个对象
             if(!/MSIE(6|7|8)/.test(window.navigator.userAgent)){
                 val=window.getComputedStyle(obj)[attr];
             }else{
                 val=obj.currentStyle[attr];
             }
             return val;
         }

升级getcss()，部分去掉样式的单位
  function getcss(obj,attr){
        var val=null;
        var reg=null;
        if("getComputedStyle" in  window){
             val=window.getComputedStyle(obj,null)[attr];
        }else{
            val=obj.currentStyle[attr];
        }
        reg=/^(-?\d+(\.\d+)?)(px|rem|em)$/i;
        return reg.test(val)?parseFloat(val):val;
}
标准浏览器和IE浏览器获取的结果是不一样的----->对于部分样式属性，不同浏览器获取的结果不一样，主要是由于getComputedStyle和currentStyle在某些方面不一样
获取复合型值的时候，比如border等需要拆开了来获取，会避免获取不到的问题

---------------------------浏览器滚动条卷去的高度scrolltop------------------------

1、只读的属性
client系列offset系列scrollWidth/scrollHeight都是只读的属性

2、可以设置值的属性
box.scrollTop=0直接回到了容器的顶部

我们的scrollTop的值是存在边界值的（最大值和最小的值的），最小是0，
最大是box.scrollHeight-box.clientHeight




------------------------------------------------获取元素的偏移量-----------------------------------------------------
盒子模型案例分析offsetParent和offsetLeft/offsetTop 的特点
parentNode：父节点
    var outer=document.getElementById('outer');
    var inner=document.getElementById('inner');
    var center=document.getElementById('center');
//    console.log(center.parentNode);
//    console.log(document.body.parentNode);
//    console.log(document.documentElement.parentNode);
//    console.log(document.parentNode);
//    console.log(document.aa);

Null和undefined都代表没有，但是null是值不存在，undefined是连这个属性都不存在

offsetParent：父级参照物，在同一个平面中，最外层的元素是里面所有的父级参照物（和HTML层级结构没有必然的联系）
一般来说一个页面中所有元素父级参照物都是body
center/inner/outer.offsetParent ----->body
document.body.offsetParent   //body是平面中的顶级是没有父级参照物的

想要改变父级参照物需要脱离当前平面，需要通过position定位来进行改变
           position: relative;
           position: absolute;
           position: fixed;
           position: static;
           position:inherit;
absolute、relative、fixed任意一个值都能把父级参照物修改

offsetTop/offsetLeft：当前元素(外边框)距离其父级参照(内边框)物偏移距离
思考：不管center的父级参照物是谁，获取其距离body的左偏移？
1、首先加上自己本身的左偏移
2、获取自己的父级参照物（xx）把xx的左边框和左偏移加上
3、基于当前的xx向上找父级参照物，找到后依然是累加边框和其左偏移
4、一直找到父级参照物为null，一直找到body

Offset()：和jq中的offset()方法相同，实现获取页面中任意一个元素，距离body的偏移（包含左偏移和上偏移）,不管当前的父级参照物是谁。 

在标准的ie8浏览器中我们使用offsetLeft/offsetTop其实是是把父级参照物的边框已经算在内了，所以我们不需要自己再单独加边框  
   function offset(curEle) {
        var totalleft = null;
        var totaltop = null;
        var par = curEle.offsetParent;
//      累加本身
        totalleft += curEle.offsetLeft;
        totaltop += curEle.offsetTop;
//        只要没有找到body就把父级参照物的边框和偏移进行累加
        while (par) {
//          不是ie8就累加边框
            if(window.navigator.userAgent.indexOf('MSIE 8.0')==-1){
                //累加父级参照物的边框
                totalleft+=par.clientLeft;
                totaltop+=par.clientTop;
            }
            //累加父级参照物的偏移
            totalleft+=par.offsetLeft;
            totaltop+=par.offsetTop;
            par=par.offsetParent;
        }
        return{
            left:totalleft,
            top:totaltop
        }
}

作业：
1、点击滑动到文档开始
2、图片无缝滚动
3、文字上下/左右无缝滚动
4、手风琴效果
5、轮播
--------------------------------------------js同步与异步编程------------------------------------
Js是单线程------->可以想象它是一根筋，做着当前的这件事情，没有完成之前绝对不会做下一件事情
Js中的两种编程思想：同步和异步编程
同步编程------->只有上一件事情没有完成，继续处理上一件事情，只有上一件事情完成了，才会说做下一件事情（js中大部分是同步编程的）

异步编程：规划做一件事情，但是不是当前立马去执行这件事情，需要等待一定的时间，这样的话，我们不会等着他执行，而是继续执行下面的操作，只有当下面的事情都处理完成了，才会返回头处理之前的事情，如果下面的事情并没有处理完成，不管之前的事情有没有到时间，都会踏踏实实的等它执行完。

在js中异步编程只有四种情况：
1、定时器都是异步编程
2、所有的事件绑定都是异步编程的
3、Ajax读取数据的时候
4、回调函数也是异步编程

每一个浏览器对于定时器的等待时间都有一个最小值，谷歌是5~6ms,IE10~14ms，如果设置的等待时间小于这个值不起作用，还是需要等待最小的时间才执行的，尤其是写0也不立即执行