1.HTML元素

html元素是网页的根元素，document.documentElement就指向这个元素。

1.1 clientWidth, clientHeight

这两个属性返回视口（viewport）的大小，单位为像素。所谓“视口”，是指用户当前能够看见的那部分网页的大小。document.documentElement.clientWidth和document.documentElement.clientHeight，基本上与window.innerWidth和window.innerHeight同义。但是前者不将滚动条计算在内（很显然，滚动条和工具栏会减小视口大小），而后者包括了滚动条的高度和宽度。

1.2 offsetWidth，offsetHeight

这两个属性返回html元素的宽度和高度，即网页的总宽度和总高度。

2.Element对象

2.1 clientHerght, clientWidth, clientLeft, clientTop

这几个属性与元素节点可见区域的坐标相关。如果一个元素是滚动的，clientWidth和clientHeight只计算它的可见部分的宽度和高度。

(1) clientHeight

clientHeight属性返回元素节点的可见高度，包括padding、但不包括水平滚动条、边框和margin的高度，单位为像素。

(2) clientWidth

clientWidth属性等于网页元素的可见宽度，即包括padding、但不包括垂直滚动条（如果有的话）、边框和margin的宽度，单位为像素。

(3) clientTop

clientTop属性表示一个元素顶部边框的宽度，不包括顶部的margin和padding。单位为像素。

(4) clientLeft

clientLeft属性表示一个元素左边边框的宽度，不包括左侧的margin和padding。单位为像素。

2.2 scrollHeight, scrollWidth, scrollLeft, scrollTop

这几个属性与元素节点占据的总区域的坐标相关。

  (1) scrollHeight

scrollHeight属性返回指定元素的总高度，包括由于溢出而无法展示在网页的不可见部分。如果一个元素是可以滚动的，则scrollHeight 包括整个元素的高度，不管是否存在垂直滚动条。scrollHeight属性包括padding，但不包括border和margin。该属性为只读属 性。

(2) scrollWidth

scrollWidth属性返回元素的总宽度，包括由于溢出容器而无法显示在网页上的那部分宽度，不管是否存在水平滚动条。该属性是只读属性。

(3) scrollTop

scrollTop属性设置或返回垂直滚动条向下滚动的像素数量。它的值等于元素的顶部与其可见的最高位置之间的距离。对于那些没有滚动条或不需要滚动的元素，该属性等于0。该属性是可读写属性，设置该属性的值，会导致浏览器将指定元素自动滚动到相应位置。

(4) scrollLeft

scrollLeft属性设置或返回水平滚动条向右侧滚动的像素数量。它的值等于元素的最左边与其可见的最左侧之间的距离。对于那些没有滚动条或不需要滚动的元素，该属性等于0。该属性是可读写属性，设置该属性的值，会导致浏览器将指定元素自动滚动到相应的位置。

3.window对象的大小和位置

3.1 window.screenX,  window.screenY

window.screenX和window.screenY属性，返回浏览器窗口左上角相对于当前屏幕左上角（(0, 0)）的水平距离和垂直距离，单位为像素。

3.2 window.innerHeight, window.innerWidth

window.innerHeight和window.innerWidth属性，返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport），单位为像素。

当用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。因为这时网页的像素大小不变，只是每个像素占据的屏幕空间变大了，因为可见部分（视口）就变小了。

这两个属性值包括滚动条的高度和宽度。

3.3 window.outerHeight, winodw.outerWidth

window.outerHeight和window.outerWidth属性返回浏览器窗口的高度和宽度，包括浏览器菜单和边框，单位为像素。

3.4 window.pageXOffset, window.pageYOffset

window.pageXOffset属性返回页面的水平滚动距离，window.pageYOffset属性返回页面的垂直滚动距离，单位都为像素。