前端窗口大小和单个元素大小的计算
1. 窗口的大小即浏览器的大小： window.innerWidth, window.innerHeight, window.outerHeight,
window.outerWidth 在IE9+，Safari，Firefox, Chrome中，outerWidth和outerHeight返回浏览器窗口本的大小（无论是从最外层的window对象还是从某个框架访问）, innerHeight和innerWidth是指视口的大小，即浏览器可视区域的大小。
在opera中，outerWidth和outerHeight表示页面可见区域的大小（不知道能不能这么说，书上说的是，页面视图容器的大小，待测试）
在IE8及更早版本中，没有取得当前浏览器窗口尺寸的属性，不过，它通过DOM提供了页面可见区域的相关信息
在IE，Firefox，Safari，Opera和Chrome中保存了页面视口的信息： document.documentElement.clientHeight和document.documentElement.clientWidth,
如果是混杂模式则需要使用document.body.clientWidth和document.body.clientHeight。 目前测试Firefox和Chrome都有document.body.clientWidth和document.body.clientHeight, 结果是body的设置的高度，如果没有设置则为实际高度，不包括margin的上下8px，也就是16px
判断浏览器视口大小的方法
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if(typeof pageWidth !== "number"){
if(document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else{ pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight; } }
Firefox 和Chrome中body的默认margin为8px，所以需要reset样式。否则window.innerWidth会比实际的少16px
在移动设备上，window.innerWidth和window.innerHeight保存着可见视口，也就是屏幕上可见页面区域的大小，而document.documentElement获取的是布局视口，即页面的实际大小。
移动IE浏览器不支持window的那些属性，但是通过document.documentElement.clientWidth和document.documentElement.clientHeight可以获取可见视口的信息，通过document.body可以获取布局视口的信息。
前端窗口大小和单个元素大小的计算
判断浏览器滚动的高度：不建议用 “scrollWidth和scrollHeight, scrollTop, scrollLeft”这些，因为存在浏览器兼容问题
问题是在chrome和firefox中取得scrollTop的前缀不同，chrome中用document.body取，而在firefox中，document.body取得的值是0，
用document.documentElement取得的值才是正确的。 我们用document.documentElement
. document.documentElement.scrollWidth和document.documentElement.scrollHeight表示body的实际尺寸，目前测试chrome，firefox正确.
判断是否滚动到底部：
var buttom = document.documentElement.scrollHeight - window.innerHeight - win-dow.scrollY;
if(bottom > 0){ //do sth } window.scrollBy(xnum, ynum);
2. 元素大小
a. 偏移量
offsetHeight: 元素在垂直方向上占用空间的大小，以像素计，包括元素的高度，（可见的）水平滚动条的高度，上边框高度，下边框高度和内边距。
offsetWidth: 元素在水平方向上占用空间的大小，以像素计，包括元素的宽度，（可见的）垂直滚动条的高度，左边框高度，右边框高度和内边距。
offsetLeft: 元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离。 包含元素的引用包含在offsetParent属性中，指据该元素最近的一个具有大小的父元素
clientWidth和clientHeight是不包含border的部分
scrollWidth和scrollHeight,分两种情况,第一种是没有滚动条的时候,和clientWidth和clientHeight 的值是相同的,即不包含border部分。第二种情况是有滚动条的时候，表示元素的实际大小
scrollLeft 和scrollTop 表示隐藏部分的大小，可以修改, 如设置element.scrollTop = 0, 则元素内容滚动到了元素顶部
