浏览器窗口可视区域大小

window.innerHeight  浏览器窗口的内部高度
window.innerWidth  浏览器窗口的内部宽度

在不同浏览器都实用的JavaScript方案：

var w=document.documentElement.clientWidth || document.body.clientWidth;
var h=document.documentElement.clientHeight || document.body.clientHeight;

offset 系列

1 offsetLeft :当前元素到定位父盒子的距离（边框到边框）
offsetLeft 是自身border左侧到父级padding左侧的距离
2 offsetWidth 除了margin以外所有的宽度
3 offsetHeight: 除了margin以外所有的高度
offsetHeight=height+padding+border
包括 自身高度 内边距 边框 不包括 外边距（因为有offsetTop)
4 offsetParpent 可以获取当前元素外面的定位父盒子
例： box.offsetparpent

scroll 系列属性

  1 scrollHeight 和scrollWidth
  标签内部时机内容的高度/宽度
  1 不计算边框，如果内容不超过盒子。值伪盒子的宽高（不带边框）
  3 如果内容超出了盒子，就是顶部或者左边边框内侧一直到内容的最外部分（包含边框）
页面滚动座标非常常用，但是有很大的兼容性问题，可以合写为
var scrollTop=window.pageYOffset || document.documentElement.scrollTop|| document.body.scrollTop||0;

client 可视系列属性

1 clientWidth 和clientHeight
 偏移：offsetWidth: width+padding+border
 卷曲： scrollWidth: width+padding(不包含border) 内部内容的大小
 可视：clientWidth:width+padding(不包含border)
 2 clientTop和clientLeft
 他们就是borderTop和borderLeft（如果有滚动条会包含滚动条的宽度，但谁见过滚动条在顶部或者左侧的？！）

网页可视区宽高的兼容写法

 面可视区宽高非常常用，但是有很大的兼容性问题，可以合写为
var clientWidth = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth|| 0;