La diferencia entre la serie offset y la serie cliente y la serie scroll

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

serie de clientes

  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)   //等于上边框的值

serie de desplazamiento

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

La diferencia entre los tres

offset series
offsetHeight: la altura de la caja
offsetLeft: la distancia desde la izquierda
offsetTop: la distancia desde la parte superior
offsetWidth: la anchura de la caja
offsetParent: obtener el elemento principal posicionado

serie del cliente (excluyendo los bordes, incluidos los márgenes internos)
clientTop: borde superior
clientLeft: borde izquierdo
clientHeight: alto + relleno
clientWidth: ancho + relleno

evento de desplazamiento:
scrollHeight: altura del contenido
scrollWidth: ancho del contenido + ancho de la barra de desplazamiento
scrollLeft: la distancia que la página se desliza hacia la izquierda