一、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>