三大家族

console.log(div.offsetHeight,div.offsetWidth) //盒子的宽度和高度 116 116 内容+内边距+边框
console.log(div.clientHeight,div.clientWidth) //盒子的宽度和高度 106 106 内容+内边距

console.log("X轴:"+e.pageX+"---Y轴"+e.pageY) //根据页面来计算的坐标
console.log("X轴:"+e.offsetX+"---Y轴"+e.offsetY)//根据盒子来计算坐标的
//注意: mask.style.pointerEvents = 'none'; //用offsetX时抖动处理
console.log("X轴:"+e.clientX+"---Y轴"+e.clientY)//浏览器的第一个视角

/*
offsetTop
如果父类有定位,那么根据父类来计算盒子的坐标
如果没有定位,那么根据文档页面来计算盒子的坐标
*/
console.log(b1.offsetTop,b1.offsetLeft) //根据文档页面来计算坐标的 50 50
console.log(b2.offsetTop,b2.offsetLeft) //根据文档页面来计算坐标的 50 50 0 0

视口的宽和高
document.documentElement.clientWidth //获取视口的宽
document.documentElement.clientHeight //获取视口的高