盒子模型

CSS模型由四部分组成：width height padding margin border

在W3C标准下，盒子模型不包括border和padding值，而在IE浏览器下是包括border和padding的。

1.JS盒子模型：通过系统提供的属性和方法，来获取当前元素的样式值

2.JS提供的属性和方法：
1)client:clientWidth clientHeight clientLeft clientTop
2)offset:offsetWidth offsetHeight offsetLeft offsetTop offsetParent
3)scroll:scrollWidth scrollHeight scrollLeft scrollTop

3.关于父级
1)parentNode 结构父级
2)offsetParent  定位父级

4.JS提供的属性和方法：
1)client系列：
  clientWidth/clientHeight:元素设置的宽/高+左右/上下padding;
  clientLeft/clientTop:左边框的宽度/上边框的宽度
  跟内容是否溢出 无关

2)offset系列：
  offsetWidth/offsetHeight:clientWidth/clientHeight+左右border+上下border
  offsetLeft/offsetTop:当前元素的外边框距离定位父级的内边框的距离
  跟内容溢出 无关

3)scrollHeight:
  跟内容溢出 有关
  内容溢出:约等于上padding+真实内容的高度；左padding+真实内容的宽度
  内容没有溢出:等于clientWidth/clientHeight

为什么约等于？
不同浏览器中scrollHeight的值是不同的
同一个浏览器下，内容是否溢出隐藏，拿到的值也不同的

5.关于JS盒子模型的一些问题：
1）通过JS的属性和方法拿到的都是元素的复合样式，拿不到单独的值；--getCss;
2）通过JS的属性和方法拿到的都是元素的复合样式值都是整数，不会出现小数；
3）offsetLeft只能求出当前定位元素的外边框距离定位父级的内边框之间的距离，但无法求出定位元素距离body的距离；--offset   {left:xx,top:xx}
4)JS盒子模型的兼容性存在问题；--win;
6.关于浏览器的常用兼容处理思想：
1）思想1：属性的判断：
1.attr in obj:'getComputedStyle' in window;
2.obj.attr: window.getComputedStyle
3.typeOf obj.attr==='function': typeOf window.getComputdStyle==='function';
2）思想2：浏览器异常捕获来解决浏览器的兼容性问题；try{}catch(e){}
3）思想3：通过浏览器判断处理浏览器兼容问题：
var reg=/MSIE (6|7|8)/g;
1.reg.test(window.navigator.userAgent);//true:IE678
2.window.navigator.userAgent.search(reg) !== -1;//true:IE678
3.window.navigator.userAgent.match(reg)//true:IE678

7.结构父级和定位父级
结构父级中最大的元素是html;
定位父级中最大的元素是body;