The difference between offset series and client series and scroll series

offset series

<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 series

  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 series

 <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）

The difference between the three

offset series
offsetHeight: the height of the box
offsetLeft: the distance from the left
offsetTop: the distance from the top
offsetWidth: the width of the box
offsetParent: get the positioned parent element

client series (excluding borders, including inner margins)
clientTop: upper border
clientLeft: left border
clientHeight: height+padding
clientWidth: width+padding

scroll event:
scrollHeight: content height
scrollWidth: content width + scroll bar width
scrollLeft: the distance the page slides out to the left