BOM

window.navigator.userAgent 获取浏览器的信息

JS提供的属性和方法：
1）client系列：clientWidth clientHeight clientLeft clientTop;

2. offset系列：offsetWidth offsetHeight offsetLeft offsetTop offsetParent;
3. scroll系列：scrollWidth scrollHeight scrollLeft scrollTop;

关于父级：
1）parentNode 结构父级
2）offsetParent 定位父级

JS提供的属性和方法：
1）client系列：
clientWidth/clientHeight:元素设定的宽/高+左右/上下padding;
clientLeft/clientTop:左边框/上边框的宽度；
跟内容是否溢出：无关；
2)offset系列：
offsetWidth/offsetHeight:clientWidth/clientHeight+左右border/上下的border；
offsetLeft/offsetTop：当前元素的外边框距离定位父级的内边框的距离；
跟内容是否溢出：无关
3）scrollHeight/scrollWidth:
跟内容是否溢出：有关：
内容溢出： 约等于上padding+真实内容的高度；/左padding+真实内容的宽度；
内容没有溢出：等于clientWidth/clientHeight
为什么是约等于？
①不同浏览器中，拿到的scrollHeight值是不同的；
②同一个浏览器下，内容是否溢出隐藏，拿到的值也不同；

关于JS盒子模型的一些问题：
1）通过JS的属性和方法拿到的都是元素的复合样式，拿不到单独的值；--getCss;
2）通过JS的属性和方法拿到的都是元素的复合样式值都是整数，不会出现小数；
3）offsetLeft只能求出当前定位元素的外边框距离定位父级的内边框之间的距离，但无法求出定位元素距离body的距离；--offset {left:xx,top:xx}
4)JS盒子模型的兼容性存在问题；--win;

关于浏览器的常用兼容处理思想：
思想1：属性的判断：
①attr in obj:'getComputedStyle' in window;
②obj.attr: window.getComputedStyle
③typeOf obj.attr==='function': typeOf window.getComputdStyle==='function';
思想2：浏览器异常捕获来解决浏览器的兼容性问题；try{}catch(e){}
思想3：通过浏览器判断处理浏览器兼容问题：
var reg=/MSIE (6|7|8)/g;
①reg.test(window.navigator.userAgent);//true:IE678
②window.navigator.userAgent.search(reg) !== -1;//true:IE678
③window.navigator.userAgent.match(reg)//true:IE678

结构父级和定位父级：
结构父级中最大的元素是Html;
定位父级中最大的元素是body;