webapi三大家族(offset,scroll,client)offset家族 scroll家族(固定导航,电梯导航)

offset家族

获取自身真实宽高和位置

    offsetWidth/offsetHeight:真实宽/高 = 宽度/高度 + padding*2 + border*2
    offsetTop/offsetLeft:自身左/上  外边框  到 定位父元素  左/上 内边框距离
        *如果父级有定位，就是父级元素，没有的话就是body

scroll家族(固定导航,电梯导航)

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

    scrollWidth/scrollHeight:内容宽高
    scrollTop/scrollLeft:滚动条滚动距离

client家族(响应式布局)

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

    clientWidth/clientHeight:可视区域
    clientTop/clientLeft:左/上 边框宽度

样式代码

    <!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8" />
  <title>标题</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

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

<body>
  <div class="box">
    我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
    我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
    我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
    我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
    我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
  </div>

  <script>
    let box = document.querySelector('.box')
    // offset家族
    console.log(box.offsetTop, box.offsetLeft)
    console.log(box.offsetHeight, box.offsetWidth)
    // scroll家族
    console.log(box.scrollTop, box.scrollLeft)
    console.log(box.scrollHeight, box.scrollWidth)
    // client家族
    console.log(box.clientTop, box.clientLeft)
    console.log(box.clientHeight, box.clientWidth)
  </script>
</body>

</html>