【无标题】

offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解
el.offsetHeight = height + padding + border（滚动条是在边框内的，自然也包括在内）
el.clientHeight = 可视化看到的高度 (就是content的高度)
el.scrollHeight = 整个元素的高度 （ 包括了clientHeight看不到的那部分，一般就是你css设置的元素高度）

el.offsetTop = 子元素的外边框到父元素的内边框的垂直距离 （没边框时自然就是content到content的距离）
el.offsetLeft = 子元素的外边框到父元素的内边框的水平距离距离

el.scrollTop = 元素被卷去的垂直距离 (就是你看不到的那部分，包括边框遮住的部分，因为遮住的部分你也看不到。结果有小数位)
在chrome下测试，当我们滑动到底部时，el.scrollHeight === el.clientHeight + Math.ceil(el.scrollTop)
el.scrollLeft = 元素被卷去的水平距离

el.clientTop = 就是元素上边框的大小 (不够语义化也不常用)
el.clientLeft = 元素左边框的大小

还有几个和mousemove鼠标移动事件相关的属性，也是比较容易混淆的
e.offsetY = 鼠标距离该元素上面的距离 (不包括边框，在边框上移动时得到的负值)
e.offsetX = 鼠标距离该元素左边的距离

e.clientY = 鼠标距离客户端可视区的垂直距离
e.clientX = 鼠标距离客户端可视区的水平距离

clientX, clientY, offsetX, offsetY, screenX, screenY, x, y 的区别是什么？

clientX, clientY　　是鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0, clientY=0；

offsetX, offsetY　 是鼠标当前相对于网页中的某一区域的位置，当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0；

screenX, screenY　是相对于用户显示器的位置 x,y是鼠标当前相对于当前浏览器的位置

clientHeight

大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

offsetHeight

IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，offsetHeight 返回网页内容实际高度。

scrollHeight

IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。