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); // 有效果
}
实现懒加载：
- 图片设置自定义属性比如：_url = “图片地址”
- 当图片顶部的高度 >= 可视区的高度 + 滚动条的高度时，让图片的 src = _url，开始加载图片
可视区的高度：
window.innerHeight （标准浏览器及IE9+） || document.documentElement.clientHeight （标准浏览器及低版本IE标准模式） || document.body.clientHeight （低版本混杂模式）
滚动条的高度：
window.pageXOffset / window.pageYOffset 只能读不能写
document.documentElement.scrollTop 能读也能写
document.body.scrollTop ( IE）
window.scrollTo(x,y) 专门用来写滚动条的距离的
