| clientHeight | 返回可见区域的高度,不带px,会获取包括内容区和内边距，不包括边框 |
| clientWidth | 返回可见区域的宽度,不带px,会获取包括内容区和内边距，不包括边框 |
| offsetWidth | 返回的宽度会加上边框就是整个的大小 |
| offsetHeight | 返回的高度会加上边框就是整个的大小 |
| offsetParent | 用来获取当前元素的定位父元素，就是父元素必须带定位 |
| offsetLeft | 当前元素相对于其定位父元素的水平偏移量 |
| offsetTop | 当前元素相对于其定位父元素的垂直偏移量 |
| scrollWidth | 元素整个滚动区域的宽高 |
| scrollLeft | 可以获取水平滚动条滚动的距离 |
| clientX | 可以获取鼠标指针的水平坐标 |
| clientY | 可以获取鼠标指针的垂直坐标 |
| pageX | 可以获取鼠标相对于当前页面的x坐标 |
| pageY | 可以获取鼠标相对于当前页面的y坐标 |
结论：当滚动条完全拖动到底部的时候则满足scrollHeight-scrollTop==clientHeight
小练习：使div可以跟随鼠标移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script>
window.onload=function(){
//使div可以跟随鼠标移动
var box1=document.getElementById("box1");
document.onmousemove=function(event){
//解决兼容问题
event=event || window.event;
//获取滚动条滚动的距离
var st=document.body.scrollTop || document.documentElement.scrollTop;
var sl=document.body.scrollLeft || document.documentElement.scrollLeft;
//获取到鼠标的坐标
//clientX是鼠标在当前窗口的坐标，div的偏移量，是相对于整个页面的
var left=event.clientX;
var top=event.clientY;
//设置div偏移量
box1.style.left=left+sl+"px";
box1.style.top=top+st+"px";
}
}
</script>
</head>
<body style="height: 1000px;width: 2000px;">
<div id="box1"></div>
</body>
</html>
