JS盒子模型：通过JS中提供一系列的属性和方法，获取页面中元素的样式信息值
//#bax(有很多自己的私有属性) -> HTMLDivElement.peototype -> HTMLElement.prototype -> Element.prototype
var box = document.getElementById('div')
console.dir(box)
//内容的宽度和高度：我们设置的width/height这两个样式就是内容的宽和高，如果没有设置高度，容器中的高度会根据里面的内容自己适应，这样获取的值就是真实内容的高，如果设置股东的高度，其内容高度不会改变
//真实内容的高度和宽度：这个代指的实际内容的狂傲(和我们设置的米有必然的关系)，如果有溢出，那么真实内容的高度是要把溢出来的高度也要加进去
// 1、client系列(当前元素的私有属性)
clientHeight和clientWidth：内容的高度/宽度+padding值，和内容溢出没有关系
clientLeft：左边框的宽度，clientTop：上边框的高度
//2、offset系列
offsetWidth/offsetHeight：clientWidth/clientHeight+左右/上下边框（和内容溢出是没有任何的关系）
offsetParent：当前元素的父级的参照物
offsetLeft/offsetTop:当前元素的外边框距离父级参照物的内边框的偏移量
//3、scroll系列
scrollWidth/scrollHeight：和我们的clientWidth/clientHeight一样(前提是容器中的内容美誉溢出的情况下)，如果容器中的内容有溢出，我们获取的结果是如下规则
scrollWidth：真实内容的宽度(包括溢出)+左填充
scrollHeight：真实内容的高度(k=包括溢出)+上填充
// ->获取到的结果都是约等于的值，因为：同一个浏览器，我们是否设置overflow：hidden对最终的结果是有影响的；在不同的浏览器中我们获取到的结果也是不一样的；
scrollLeft/scrollTop：滚动条卷去的宽度/高度
//4、使用window.getComputedStyle(当前要操作的元素对象, 当前元素的伪类/null)这个方法获取所有经过浏览器计算过的样式
//获取到的结果是CSSStyleDeclaration这个类得一个实例：包含了当前元素的所有样式属性值
所有经过浏览器计算过的样式：只要当前的元素标签可以在页面中呈现出来，那么它的所有的样式都是经过浏览器计算过的(渲染过的)，哪怕某些样式没有写，也是可以获取到的
//-> console.log(window.getComputedStyle(box,null))
//方法虽然好用，但是在IE6~8下是不兼容的，因为window下没有getComputedStyle这个属性
//在IE6~8下我们可以使用currentStyle方法来获取所有经过浏览器计算过的样式值
getCss(curEle, attr){
if('getComputedStyle' in window){
window.getComputedStyle(curEle, null).attr
}else{
curEle.currentStyle.attr
}
}
//通过检测浏览器版本来检测兼容性
//-> window.navigator.userAgent 检测浏览器版本
第一次升级：把获取到的样式值"单位去掉"
getCss(curEle, attr){
var val = null, reg = null;
if('getComputedStyle' in window){
val = window.getComputedStyle(curEle, null).attr
}else{
//如果获取传递进来的结果是opacity，说明我想获取的是透明度属性值，但是在IE6~8下是获取透明度是需要使用filter的
if(attr==='opacity'){
val = curEle.currentStyle.filter // ->'alpha(opacity=10)' 把获取到的结果进行剖析，获取里面的数字，然后除以100，才和其他浏览器保持一致
reg=/^plpha\(opacity=(\d+(?:\.\d+)?\)$/i;
xal = reg.test(val)?reg.exec(val)[1]/100:1
}else{
val = curEle.currentStyle.attr
}
}
reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
return reg.test(val)?parseFloat(val) : val
}
JS盒子模型中：client系列/offset系列/scrollWidth/scrollHeight都是"只读"属性->只能通过属性获取值，不能通过属性修改值
scrollTop/scrollLeft：滚动条卷去的高度/宽度(这两个是唯一"可读写属性")
直接设置scrollTop=0;回到容器顶部
注意：scrollTop的值是存在边界值(最大值和最小值)，我们要是设置的比最大值大或者比最小值小都没用，起到效果的依然是边界值，比如：scrollTop=-1000; -> 其效果仍然是回到容器顶部，用scrollTop属性获取仍然是0；即最小值是0，最大值=scrollHeight - clientHeight
定时器：setTimeout/setInterval
setTimeout：等到设置的时间后，开始执行定时器中的方法，方法执行完成后，定时器结束
setInterval：等到设置的时间后，开始执行定时器中的方法，方法执行完成后，定时器并没有结束，会以每隔设定的时间执行一次，直到手动清除定时器为止
注意：定时器是有返回值的，返回的结果是一个数字，数字是几就代表第几个定时器，定时器的顺序是不分setTimeouti和setInterval，
清除定时器：clearTimeout(数字)/clearInterval(数字)：代表把数字代表的那个第N个定时器清除掉
注意：clearTimeout(数字)/clearInterval(数字)设置的不管是setTimeout/setInterval定时器，这两个清除器都可以使用，都能清除掉定时器。
滚动条滚动事件：window.onscroll = function(){} //-> 只要滚动条滚动，就会触发此事件
document.documentElement.srcollTop||document.body.scrollTop来获取此时滚动条滚动的高度
document.documentElement.clientHeight||document.body.clientHeight来获取此时一屏的高度