DOM——盒子模型

盒子模型：元素的数据（比如宽高、大小等）

x.offsetWidth:本身宽度+边框线+左右内边距（width+border+padding）

x.offsetHeight:height+border+padding

x.offsetTop：相对第一个父级节点有定位属性的上偏移量

x.offsetLeft：相对有定位属性的父节点左偏移量

x.offsetParent:最近的有定位属性的父元素

注意：client：是内容可视区域的高度和宽度（不包括不可见部分）

x.clientWidth：本身的宽度+左右内边距（width+padding）

x.clientHeight：height+padding

x.clientTop：上边框线的宽度(border)

x.clientLeft：左边框线的宽度 (border)

x.scrollWidth：盒子的实际宽度(包括滚动条不可见部分，不包括边线)

x.scrollHeight：盒子的实际高度(包括滚动条不可见部分，不包括边线)

x.scrollTop：滚动条向下滚动的距离(滚动后被隐藏的高度)

x.scrollLeft：滚动条向右滚动的距离

window.innerHeight：浏览器窗口可见区域高度

window.innerWidth：浏览器窗口可见区域宽度

封装一个函数，元素与body之间的距离：

let total=0;
 Object.prototype.myoffsetTop=function(){
    let fu=this.offsetParent
    total+=this.offsetParent
    if(fu){
       fu.myoffsetTop()
       }
   return total
   }