盒子模型

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

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

1.JS盒子模型：通过系统提供的属性和方法，来获取当前元素的样式值2.JS提供的属性和方法：1)client:clientWidth clientHeight clientLeft clientTop2)offset:offsetWidth offsetHeight offsetLeft offsetTop offsetParent3)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.getComputedStyle3.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:IE6782.window.navigator.userAgent.search(reg) !== -1;//true:IE6783.window.navigator.userAgent.match(reg)//true:IE6787.结构父级和定位父级结构父级中最大的元素是html;定位父级中最大的元素是body;