元素盒子模型

 1. obj.offsetWidth //返回元素的宽度（包括元素宽度，内边距和边框）；

 2. obj.offsetHeight //返回元素的高度（包括元素的高度，内边距和边距）；

3. obj.offsetLeft //元素到开定位属性的父级元素的距离；

 4. obj.offsetTop //元素到开定位属性的父级元素的距离；

 5. obj.clientWidth //返回元素的可视宽（包括元素宽度，内边距，不包括边框）；

 6. obj.clientHeight //返回元素的可视高（包括元素的高，内边距，不包括边框）；

 7. e.offsetX //鼠标点击处相对于事件源左上角位置的水平距离；

 8. e.offsetY //鼠标点击处相对于事件源左上角位置的竖直距离；

 9. e.clientX //鼠标点击处相对于浏览器窗口的水平偏移量；

 10. e.clientY //鼠标点击处相对于浏览器窗口的竖直偏移量；

11. e.pageX //鼠标点击处相对于页面的水平偏移量（没有滚动条时与e.clientX相同，有滚动条时相当于e.clientX+scrollLeft）

12. e.pageY //鼠标点击处相对于页面的竖直偏移量（没有滚动条时与e.clientY相同，有滚动条时相当于e.clientY+scrollTop）

13.baba=this.offsetParent  获取this的具有定位属性的父元素

通过盒子模型代码求盒子之间的距离演示:

        let total = 0;
		Object.prototype.myoffsetTop = function () {
			let baba = this.offsetParent//box3的具有定位的父元素
			total += this.offsetTop//this距离有定位属性的父元素的上距离
			if (baba) {//如果所有父元素没有定位属性了如body  baba就等于null if就不运行
				baba.myoffsetTop()//box3->box2->box=null
			}
			return total
		}
		var re = box3.myoffsetTop()
		console.log(re)