目标：
1.识记13种常用的盒子模型属性
2.识记不同浏览器下两种操作浏览器窗口盒子的方法
3.能够写出操作浏览器窗口盒子模型模型的兼容方法
难点：
1.注意区分内容高度和实际内容高度
2.理解元素盒子和把浏览器页面当作一个盒子
js中的盒子模型
通过js原型链上的一系列的方法和属性，获取页面中元素的样式信息值；
client系列
clientHeight //内容的高度加上下padding
clientWidth //内容的宽度加左右padding
clientLeft //左边框的值
clientTop //上边框的值
区分两个概念
内容的宽高：是给元素定义的width/height这两个样式。如果没有设置height值，容器的高度会根据里面内容自己适应，这样获取的值就是真实的内容的高；如果设置固定的高度，不管内容是多少，内容的高度指的都是设定的这个值；
真实内容的宽高：如果设置的height是200px，如果内容有溢出，那么真实内容的高度是把溢出内容的高度也要加起来；
总结：client获取的是内容的宽高
scroll系列
scrollHeight || scrollWidth
//真实内容的高度/宽度（包含溢出）+ 左填充/上填充
//注:获取到的结果都是约等于的值，因为同一个浏览器是否设置overflow=hidden对于最终的结果是有影响的；在不同的浏览器中我们获取的结果也是不同的。
scrollTop || scrollLeft //滚动条卷去的高度
offset系列
offsetHeight //clientHeight + 上下边框（和内容是否溢出没有关系）
offsetWidth //clientWidth + 左右边框（同上）
offsetParent //当前元素的父级参照物
offsetLeft || offsetTop //当前元素的外边框距离父级参照物的内边框的偏移量
计算元素距离body的上部和左部的距离
function offset(el) {
var oLeft = el.offsetLeft,
oTop = el.offsetTop,
oParent = el.offsetParent;
while(oParent) { //ie8下不计算边框
if (navigator.userAgent.indexOf('MSIE 8.0') === -1) {
oLeft += oParent.clientLeft;
oTop += oParent.clientTop;
} oLeft += oParent.offsetLeft;
oTop += oParent.offsetTop;
oParent = oParent.offsetParent; }
return {'left': oLeft,'top': oTop}
}offset(box2);//{left: 239, top: 218}
注：在标准的IE8浏览器中，我们使用offsetLeft/offsetTop其实是把父级参照物的边框已经算在内，在IE8浏览器下就不需要单独加边框了；
### 操作浏览器本身盒子模型信息
clientWidth/clientHeight是当前浏览器可视窗口的宽度和高度,一屏的宽高
scrollWidth/scrollHeight是当前页面的真实宽度和高度（所有屏的高度和宽度的和：是一个约等于值）
要兼容浏览器获取浏览器盒子模型信息我们需要这样写
//获取写两套
//documentElement在前body在后
//获取浏览器可视窗口宽、高
document.documentElement.clientWidth || document.body.clientWidth;
//设置写两套
document.documentElement.scrollTop = 0; 匹配标准浏览器
document.body.scrollTop = 0; 匹配非标准浏览器
操作浏览器盒子模型模型的兼容方法
// 手动重载
function win(attr,value) { //获取值
if(typeof value === "undefined") {
return document.documentElement[attr] || document.body[attr]; }
else{document.documentElement[attr] = value;
document.body[attr] = value;}
win('clientWidth');
win('scrollTop',0);
