js 盒子模型（没写完）

盒子模型

　　盒子模型包括margin、border、padding、content　　

　　js盒子模型的方法可分为：尺寸类、距离类、其它类 

　　client系列、offset系列、scroll系列、getBoundingClientRect()  返回值都是不带单位的数字。

尺寸类：

　　元素的尺寸，返回值不带单位的：

　　　　clientHeight / clientWidth    支持（会计算）padding，不支持border

　　　　offsetHeight / offsetWidht   支持padding，支持border  在没有设置固定宽高的时候，走被内容撑开的高度。

　　　　scrollHeight / scrollWidht   支持padding，不支持border  但支持被内容撑开的高度。

　　　　clientTop / clientLeft  上边框 / 左边框

　　元素的尺寸，返回值带单位的：

　　　　style.height / width  获取行间的样式。

　　　　getComputedStyle(obj).height / width  得到元素对象计算后的样式，只能获取，不支持padding

　　　　obj.currentStyle.height / width  也是得到计算后的样式，（同上）。用于IE低版本。

　　可视区的尺寸，返回值不带单位的：

　　　　document.documentElement.clientWidth / document.documentElement.clientHeight （会计算滚动条的宽度）

　　　　window.innerHeight / window.innerWidth  (不计算滚动条的宽度）

距离类：

　　offsetTop / offsetLeft  从子元素的上 / 左外边框到定位父级的上 / 左内边框的距离（如果没有定位父级，默认走body）

　　定位父级：offsetParent  （let box = box1.offsetParent，可读，可写）

　　ev.clientX / ev.clientY  鼠标到可视区（基于可视区）的 x、y 值

　　ev.pageX / ev.pageY  鼠标到可视区（基于页面）的 x、y 值

绝对位置的计算：ele.getBoundingClientRect().top / left / right / bottom 

ele.getBoundingClientRect().left  得到当前元素左外边框到body的左边的距离，也可以用下面的例子实现：

  let obj = box3;
  let l = 0;
  let box3L = box3.clientLeft;
  
  while (obj) {
    l += obj.offsetLeft + obj.clientLeft;
    obj = obj.offsetParent;//让这次的box，变成上一次的定位父级，再次循环是就能拿到下一段距离。
    console.log(obj);
  }
  l -= box3L;
  console.log(l);

滚动距离：

　　window.pageXOffset / window.pageYOffset  只能读不能写

　　document.documentElement.scrollTop   能读也能写

　　document.body.scrollTop       ( IE）

　　window.scrollTo(x,y)   专门用来写滚动条的距离的

　　例子：ele.scrollTo(0,100)  有滚动条的时候使用，让元素滚动到指定的位置，单位px

   document.onclick = function(){
        //window.pageYOffset = 100;//点击没有效果，
        //document.documentElement.scrollTop = 100;//有效果
        window.scrollTo(0,100);//有效果
    }