一、offset系列
1:无定位的情况下 所有元素均已浏览器左上角为参考 offset系列
//offsetWidth = width+border*2+padding*2
//offsetHeight= height+border*2+padding*2
//offsetLeft
//offsetTop
//offsetparent 返回元素 对象 当前元素离他最近的父级元素（必须有定位）
2:当有定位的情况下 当前元素或会找离他最近的父级元素为参考 最终直到找到body
/*父盒子距离他父亲左边界以及上边界的值 */
console.log('父盒子上边界'+fa.offsetTop,'父盒子左边界'+fa.offsetLeft)
/*子盒子距离他父亲左边界以及上边界的值*/
console.log('孩子的上边界'+child.offsetTop,'子盒子左边界'+child.offsetLeft)
二、client系列
document.onmousemove = function(e){
e为事件参数 保存当前事件的详细信息 例如事件对象、事件类型，如果是鼠标事件则e中有两个值 就是
鼠标横纵坐标值 分别为e.clientX e.clientY
}
三、scroll系列
var box = document.getElementById('box');
console.log(box.scrollLeft)
console.log(box.scrollTop)
console.log(box.scrollWidth)
console.log(box.scrollHeight)
四、案例：通过设置鼠标值实现对应图片的移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
position: relative;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<img src="images/图片3.jpg" alt="" style="left: 0 ; top: 0">
<script>
window.onload = function () {
/*
* 图片随着鼠标的动 --》位置值
* client 鼠标位置值 ---。事件函数里面有一个参数 （保存事件的具体信息）
* 事件对象：document ---》 可视窗 口 类型： 移动 onmousemove
*
* */
var img = document.getElementsByTagName('img')[0];
document.onmousemove = function (e) {
/*数字类型 整数*/
console.log(e.clientX,e.clientY);
img.style.left = e.clientX-150 + 'px';
img.style.top = e.clientY - 150 + 'px';
}
}
</script>
</body>
</html>
如图所示，最终图片会跟随鼠标移动而移动