offset系列与client系列以及scroll系列的区别

offset系列

<div class="box" id="box">
    </div>

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

        #box {
    
    
            width: 200px;
            height: 200px;
            border: 1px solid skyblue;
            background-color: skyblue;
            margin: 10px;
            padding: 5px;
        }
    </style>

 <script>
        var box = document.getElementById("box");
        console.log(box.offsetHeight);  //212
        //offsetHeight=height(200)+padding(5*2)+border(1*2)
         console.log(box.offsetWidth);   //212
         //offsetWidth=width(200)+padding(5*2)+border(1*2)
         console.log(box.offsetLeft);//10
         //offsetLeft=距离父元素的左边距离   box的父元素为body,在css样式中清空了body的内外边距，
         //因此只剩下box的外边距为10
          console.log(box.offsetTop);  //10
          //offsetLeft=距离父元素的上边距离   box的父元素为body,在css样式中清空了body的内外边距，
         //因此只剩下box的外边距为10
          console.log(box.offsetParent);  //父元素为body
    </script>

client系列

  var box = document.getElementById("box"); 
   console.log(box.clientHeight); //210
   //clientHeight=height(200)+padding(2*5)  //不包含边框
    console.log(box.clientWidth);   //210
    //clientWidth=width(200)+padding(2*5)   //不包含边框
    console.log(box.clientLeft);    //1
    //clientLeft=border-left(1)   //等于左边框的值
    console.log(box.clientTop);     //1
     //clientTop=border-top(1)   //等于上边框的值

scroll系列

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

        #box1 {
    
    
            width: 60px;
            height: 60px;
            margin-top: 100px;
            padding: 10px;
            border: 2px solid black;
            background-color: hsl(200, 67%, 13%);
            overflow: scroll;
            white-space: nowrap; 
        }

<div id="box1"> 嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯
嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯
</div>

 function $(id) {
    
    
            return document.getElementById(id);
        }
        console.log(($("box1").scrollHeight));  //566
        console.log(($("box1").scrollWidth));  //63
        //scrollWidth=width(60)+滚动条宽度（3）

三者的区别

offset系列
offsetHeight:盒子高度
offsetLeft:距离左边的距离
offsetTop:距离上边的距离
offsetWidth:盒子宽度
offsetParent:获取定位的父级元素

client系列 （不包括边框，包括内边距）
clientTop:上边边框
clientLeft：左边边框
clientHeight:height+padding
clientWidth:width+padding

scroll事件:
scrollHeight: 内容高度
scrollWidth:内容宽度+滚动条宽度
scrollLeft:页面向左滑出的距离