在js中，存在着N多的关于高度和宽度的属性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLeft、scrollTop、style.height、innerHeight、outerHeight、scree.height等等......这么多，傻傻分不清也正常啊。
本文的目标：
理清js及jquery的各种width和height
对width和高度做一些实际的应用
window和document
首先我们来高清两个概念：
window和document的区别是什么？
window.location和document.location是一样吗？
第一个问题：
Window对象表示浏览器中打开的窗口；window对象可以省略。比如alert()、window.alert()。
Document对象是Window对象的一部分。那么document.body 我们可以写成window.document.body；浏览器的HTML文档成为Document对象。
第二问题：
window对象的location属性引用的是Location对象，表示该窗口中当前显示文档的URL。
document的对象的location属性也是引用了Location对象。
那意思是：
window.location === document.location; //true
在通常情况下一样，frame也是一样
与window相关的宽高介绍
与window相关的宽高有一下几个：
window.innerWidth，通过字面意思我们知道这是一个内部的宽度
window.innerHeight，内部的高度
window.outWidth，外部的宽度
window.outHeight，外部的高度
window.innerHeight和window.outHeight
我发现在Windows 10下Chrome和360安全浏览器不一样、、、、（后面代码测试部分）
window.innerWidth和window.outWidth
挂靠在window下的宽高还有window.screen， window.screen包含有关用户屏幕的信息。它包括：
window.screen.width
window.screen.height
window.screen.availHeight
window.screen.availWidth
window.screenTop
window.screenLeft
图解
window相关宽高代码演示
演示代码：
console.log("innerWidth=",innerWidth); console.log("innerHeight=",innerHeight); console.log("outerWidth=",outerWidth); console.log("outerHeight=",outerHeight);
Chrome浏览器下效果
代码：
console.info("screen.width=",screen.width); console.info("screen.height=",screen.height); console.info("screen.availWidth=",screen.availWidth); console.info("screen.availHeight=",screen.availHeight);
在Chrome浏览器下效果
window相关宽高浏览器兼容问题
innerHeight和outerHeight是不支持IE9以下版本的，而screen系列则不存在兼容问题。
document下面client相关宽高介绍
docment下有三类属性：
与client相关的宽高
与offset相关的宽高
与scroll相关的宽高
与client相关的宽高
与client相关的宽高又有如下几个属性：
document.body.clientWidth
document.body.clientHeight
document.body.clientLeft
document.body.clientTop
clientWidth和clientHeight
该属性指的是元素的可视部分宽度和高度，即padding+contenr。
如果没有滚动条，即为元素设定的高度和宽度。
如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高。
我们来看如下代码：
body{ border: 20px solid #000; margin: 10px; padding: 40px; background: #eee; height: 350px; width: 500px; overflow: scroll; } console.log(document.body.clientHeight); //430（padding*2+height） console.log(document.body.clientWidth); //580（padding*2+width）
我们再看下面的代码：
#mydiv{ width: 200px; height: 200px; background: red; border: 1px solid #000; overflow: auto; }
在DIV中添加文字知道出现滚动轴，这时候