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;