对于页面元素宽高这块的内容，单纯在 CSS 里还是比较简单的，但是在 JavaScript 里就稍显复杂了，涉及到的方法也很多，而且不同浏览器之间也存在差异，当然，主要还是 IE。
这一块的东西在《JavaScript高级程序设计》中说的也不够完整，不过 CSSOM View Module W3C 工作草案有较为详细的说明，我把其中的一些常用的属性和方法逐一进行测试，在这里做一份记录。
注意： 以下所有的属性都是在 IE9 及以上的浏览器中测试，需要兼容 IE6 7 8 的同学请自行测试！
HTMLElement 对象属性
HTMLElement 对象包含的与元素大小位置相关的属性主要有：
1. clientTop / clientLeft
2. clientWidth / clientHeight
3. scrollTop / scrollLeft
4. scrollWidth / scrollHeight
5. offsetParent
6. offsetTop / offsetLeft
7. offsetWidth / offsetHeight
1. clientTop / clientLeft （只读）
获取元素的 border-left-width 和 border-top-width 的值。
2. clientWidth / clientHeight（只读）
获取元素视口的宽高，包括 padding 大小，但是不包括边框和滚动条。
Tip： 可以使用 document.documentElement.clientWidth / clientHeight 获取当前浏览器视口宽高。
3. scrollTop / scrollLeft （可读可写）
存在滚动条时，获取或设置一个元素内容的滚动尺寸。
element.scrollTop = 100; element.scrollLeft = 100;
4. scrollWidth / scrollHeight
获取元素实际内容区域的宽高，包括隐藏部分，但是不包括 border 和滚动条。
element.scrollWidth = element.scrollLeft + element.clientWidth; element.scrollHeight = element.scrollTop + element.clientHeight;
5. offsetParent（只读）
计算元素的 offsetWidth 与 offsetHeight 值时，获取元素的第一个定位祖先元素。
Tip： document.body 与 CSS属性 position 值为 fixed 的元素，其 offsetParent 为 null。
6. offsetTop / offsetLeft（只读）
获取 element 上边界和左边界相对于 element.offsetParent 的偏移量。
7. offsetWidth / offsetHeight（只读）
获取元素视口的整体宽高，也就是连带 border、padding 和滚动条在内的宽高。
element.offsetWidth = element.getBoundingClientRect().width; element.offsetHeight = element.getBoundingClientRect().height;
Tip： 对于 document.documentElement 元素，在IE11 以下的浏览器里，offsetWidth / offsetHeight 获取到的宽高是当前可视窗口 包含滚动条 在内的整体宽高，而不是 html 元素的整体宽高。
MouseEvent 位置属性
鼠标事件对象也包含一些与位置相关的属性，包括：
1. MouseEvent.screenX / MouseEvent.screenY
2. MouseEvent.pageX / MouseEvent.pageY
3. MouseEvent.clientX / MouseEvent.clientY
4. MouseEvent.offsetX / MouseEvent.offsetY
5. MouseEvent.x / MouseEvent.y
1. MouseEvent.screenX / MouseEvent.screenY（只读）
获取鼠标相对于屏幕坐标系的水平和垂直方向的偏移量。
Tip： IE浏览器是根据屏幕分辩率来算的，而其余现代浏览器则是根据视口的实际尺寸来计算的，比如我的浏览器分辨率是1900px，但由于把设置了显示效果，实际视口尺寸只有1280px。
2. MouseEvent.pageX / MouseEvent.pageY（只读）
获取鼠标相对于整个文档坐标系的水平和垂直方向的偏移量。
Tip： 在IE浏览器中，假如 html 元素存在 margin，那么计算时会减去 margin 值，在其余现代浏览器中则不会。
3. MouseEvent.clientX / MouseEvent.clientY（只读）
获取鼠标相对于浏览器视口坐标系的水平和垂直方向的偏移量。
4. MouseEvent.offsetX / MouseEvent.offsetY（只读）
获取鼠标相对于目标元素内填充边坐标系的水平和垂直方向的偏移量。
最后
对于 body 和 body 内的普通元素而言，以上叙述并没有问题，但如果涉及到 document.documentElement，不同浏览器以及IE自己的不同版本间都存在一定的差异，这里并没有做详细记录，因为实在不知道该怎么记录。
要抹平差异也简单，只需要记住，不要给 html 元素添加 margin 和 border 属性。
