1.CSS盒子模型包括四个部分组成：设定的宽高+padding+border+margin；
2.JS盒子模型：通过系统提供的属性和方法，来获取当前元素的样式值
JS提供的属性和方法：
- client系列：clientWidth，clientHeight，clientLeft，clientTop；
- offset系列： offsetWidth，offsetHeight，offsetLeft，offsetTop，offsetParent
- scroll系列：scrollWidth，scrollHeight，scrollLeft，scrollTop
3.关于父级
1）parentNode 结构父级
2）offsetParent 定位父级
4.JS提供的属性和方法：
1）clientWidth/clientHeight：元素设定的宽/高+左右padding值/上下padding值；
clientLeft/clientTop：代表对应左边框/上边框的宽度；
**跟内容是否溢出无关；
2）offsetWidth:clientWidth/clientHight+左右border/上下border；
offsetLeft：当前元素的外边框距离定位父级内边框的距离；
**跟内容是否溢出无关；
3）scrollHeight：：
跟内容是否溢出有关
内容溢出：约等于上padding+真实内容的高度；
内容没溢出：等于clientWidth或clientHeight；
为什么是约等于？
①不同浏览器中，拿到的scrollHeight值是不同的；
②同一浏览器是否溢出隐藏，拿到的值不同；
5.关于JS盒子模型的一些问题
1）通过JS的属性和方法拿到的都是属性的复合 样式，拿不到单独的值；getCss;
2）拿到的复合样式值都是整数，不会出现小数；
3）offsetLeft只能求出当前元素的外边框距离定位元素父级的内边框之间的距离，但是求出与定位元素距离body的距离；—offset{left,top}
4)JS盒子模型的兼容性存在问题；—clientWidth,scrollHeight__—win
6.关于浏览器的常用兼容处理思想
①思想一，属性值的判断：
- attr in window
- obj.attr
- typeOf obj.attr==‘function'
②思想二，浏览器异常捕获：try{……} catch(e){……} finally{……}
③思想三，通过浏览器判断处理浏览器兼容问题；
var reg=/MSTE (6|7|8)/g;
- reg.test(window.navigator.userAgent);//true:IE678;
- window.navigator.userAgent.match(reg );true —>ie678
- window.navigator.userAgent.search(reg); !==-1—>ie678
7.结构父级中最大的是HTML；定位父级中最大的元素是body；
8.this的用法
1）当前元素被触发的时候，会调用一个函数，函数中的this指向当前这个元素；
2）函数被调用的时候，点前面是谁，this就是谁
3）自执行函数中的this，window；
4）构造函数中的this是实例；
5）回调函数中的this默认是window；
2）函数被调用的时候，点前面是谁，this就是谁
3）自执行函数中的this，window；
4）构造函数中的this是实例；
5）回调函数中的this默认是window；
6）call可以改变this指向
9.类和实例
//给类添加私有属性，跟实例没有任何关系；
//实例：可以使用自己的私有属性和方法，也可以使用原型上的公有方法，但实例无法使用类的私有属性和方法；
function Fn(){
this.aa=123;//给实例添加私有属性；
}
Fn.aa=456;//给类添加私有属性；
var f=new Fn();
alert(f.aa);
alert(Fn.aa)
//实例：可以使用自己的私有属性和方法，也可以使用原型上的公有方法，但实例无法使用类的私有属性和方法；
function Fn(){
this.aa=123;//给实例添加私有属性；
}
Fn.aa=456;//给类添加私有属性；
var f=new Fn();
alert(f.aa);
alert(Fn.aa)