【每日知识】 offset，scroll家族，client家族

 1. offset家族 :

获取 ‘元素自身’ 真实宽高与位置

offsetWidth / offsetHeight : 真实宽度 = width+padding+border

offsetLeft / offsetTop : 自身 左/上 外边框 到 定位父元素 左/上 内边框距离

2. scroll家族 :

获取 ‘元素内容’ 真实宽高与位置

scrollWidth / scrollHeight :  元素内容宽高

scrollLeft / scrollTop  :  滚动条 左/上 滚动的距离

3. client家族 :

获取 ‘元素可视区域’ 宽高与位置

clientWidth / clientHeight : 可视区域 宽高

clientLeft / clientTop  : 可视区域位置 = 左边框 与 上边框

样式：

<style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 150px;
      height: 150px;
      background-color: pink;
      overflow: auto;
      padding: 10px;
      border: 10px solid red;
      margin: 100px;
    }
</style>

let box = document.querySelector('.box')

1.offset家族: 获取 ‘元素自身’  真实宽高与位置

console.log( box.offsetWidth ,box.offsetHeight  )//190 190
console.log( box.offsetLeft ,box.offsetTop  )//100 100

2.scroll家族：获取 ‘元素内容’ 真实宽高与位置（scroll：滚动）

console.log( box.scrollWidth,box.scrollHeight)//150 500
console.log( box.scrollLeft,box.scrollTop)//0 0
//要看具体内容

3. client家族 : 获取 ‘元素可视区域’ 宽高与位置

console.log(box.clientWidth, box.clientHeight)//153 170
console.log(box.clientLeft, box.clientTop)//10 10