offset系列

1.offsetLeft和offsetTop

只读属性。要确定这两个属性的值，首先要确定元素的offsetParent。offsetParent指最近的有position(不能是static)属性的父元素，如果没有则指向body元素。确定了offsetParent, offsetLeft指的是相对于父元素左侧的偏移量，offsetTop指的是相对于父元素上侧的偏移量。

具体代码：

    .father{
	      position: relative;
              width: 200px;
	      height: 200px;
	      background-color: skyblue;
	      margin: 100px;
	      overflow: hidden;   // 解决高度塌陷问题		
	    }
			
       .son{
	      width: 100px;
	      height: 100px;
	      background-color: pink;
              margin-top: 80px;
              margin-left: 100px; 
            }

             <div class="father">
		  <div class="son"></div>
	     </div>

		
	      var father = document.querySelector('.father');
              var son = document.querySelector('.son');  
              console.log(father.offsetTop);   // 100
              console.log(father.offsetLeft);  // 100
              console.log(son.offsetTop);      // 80
              console.log(son.offsetLeft);     // 100           
		
		

2.offsetWidth和offsetHeight

只读属性。返回元素的大小，宽度和高度。包括border+padding+width。

具体代码

      .w {
		 width: 300px;
		 height: 300px;
		 background-color: orange;
		 margin: 100px auto;
		 border: 2px solid #008000;
	  }

                <div class="w"></div>

                       
               var w = document.querySelector('.w');
               console.log(w.offsetWidth);    // 304
	       console.log(w.offsetHeight);  // 304
           

3.offset和style的区别

1.返回值不一样：style.left/top，style.width/height返回的是字符串，带了单位（px）的，而offsetLeft/offsetTop只返回数字（小数会四舍五入）。

2.可读写性不同：offsetLeft/Top，offsetWidth/Height只读，而style.left/top,style.height/width 可读写。

// box.offsetWidth = '200px';  offsetWidth 只能读，不能赋值
   box.style.width = '300px';

3.style.height/style.width不包含边框,而offsetWidth = border+padding+width。

4.如果没有为元素设置高度，offsetHeight会根据内容获取高度值，style.height会返回undefind

5.style.width仅仅能返回在HTML中定义的内部样式表的width属性值，如果定义在CSS中就获取不到。

6.若是没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

client系列

只读属性。返回当前节点的可视宽度和可视高度（不包括边框、外边距）（包括内边距）

client 和 offset 最大的区别就是不包括边框。

具体代码

      div{
	 width: 200px;
	 height: 200px;
	 background-color: skyblue;
	 border: 1px solid green;
	 padding: 10px;
       }
       

        <div>i love you</div>

   	
	var div = document.querySelector('div');
	console.log(div.clientWidth); // 200+10+10 = 220 不包括边框，包括了内边距			
 
			

scroll系列

scrollTop和scrollLeft是可读写属性 。scrollTop：返回网页滚动条垂直方向滚去的距离； scrollLeft：返回网页滚动条水平方向滚去的距离。

scrollWidth和scrolltHeight是只读属性，返回当前节点的实际宽度和实际高度（不包括边框，包括内边距）,没有滚动条时和clientWidth和clientHeight一样。注意：父 div 的 scrollHeight 是通过子div 计算的，表示可滚动的高度。

具体代码

     #father{
	width: 200px;
	height: 200px;
	background-color: skyblue;
	border: 1px solid greenyellow;
	padding: 10px;
	overflow: srcoll;  // 父元素需要设置为 overflow: srcoll 才可以滚动
      }
      
     #son {
	   background-color: orange;
      }

       <div id="father">
          <div id="son">
                JavaScript语言有很多复杂的概念，但却用简单的方式体现出来（比如回调函数），
          因此，JavaScript开发者无需理解语言内部的原理，就能编写出功能全面的程序；就像收音机一样，你无需理解里面的管子和线圈都是做什么用的，只要会操作收音机上的按键，就可以收听你喜欢的节目。
      然而，JavaScript的这些复杂精妙的概念才是语言的精髓，即使是经验丰富的JavaScript开发 如果没有认真学习也无法真正理解语言本身的特性。正是因为绝大多数人不求甚解， 一遇到出乎意料的行为就认为是语言本身有缺陷，进而把相关的特性加入黑名单，久而久之就排除了这门语言的多样性，人为地使它变得不完整、不安全。
          </div>   
      </div>

                   		
		    var father = document.querySelector('#father');
		    var son = document.querySelector('#son');
		    console.log(father.scrollHeight);  // 546
                    console.log(son.scrollHeight);     // 546
		    console.log(father.clientHeight);  // 183
                    console.log(son.clientHeight);     // 546
			
		   // scroll滚动事件当我们滚动条发生变化会触发的事件
                   // 这里的scroTop指的是父div的属性
		    father.addEventListener('scroll',function(){
		       console.log(father.scrollTop);
           	    })			
	  
    

event系列

event.clientX /event.clientY是目标点距离浏览器可视范围的X轴/Y轴坐标

event.pageX /event.pageY 是目标点距离document最左上角的X轴/Y轴坐标

具体代码

   .box{
		width: 200px;
		height: 200px;
		background-color: skyblue;
       }
			

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

     var box = document.querySelector('.box');
     box.addEventListener('mousemove',function(e){
     //console.log(e.pageX);  鼠标距离页面的横坐标
     //console.log(e.pageX);  鼠标距离页面的纵坐标
     //console.log(box.offsetLeft);  盒子距离页面的横坐标
     // console.log(box.offsetTop);  盒子距离页面的横坐标
     var x = e.pageX - this.offsetLeft;  
     var y = e.pageY - this.offsetTop;
     this.innerHTML = 'x坐标是' + x + 'y坐标是' + y;  // 求出 鼠标在盒子内的坐标
  })

window系列

1.innerHeight/innerWidth和outerHeight/outerWidth

window.innerHeight/window.innerWidth为只读属性，返回窗口文档显示区的高度和宽度，不包括菜单栏、工具栏和滚动条的宽高。（ 注：IE不支持这些属性，它用document.documentElement 或document.body 的 clientWidth和 clientHeight属性作为替代。）

outerHeight/outerWidth为可读写属性，设置或返回一个窗口的高度和宽度，包括所有界面元素（如工具栏/滚动条）。

2.screenX和screenY

window.screenX返回的是浏览器左边界到操作系统桌面左边界的水平距离。

window.screenY返回的是浏览器顶部距离系统桌面顶部的垂直距离。

总结

1.offset系列经常用于获得元素位置 : offsetLeft offsetTop

2.client经常用于获取元素的大小: clientWidth clientHeight

3.scroll经常用于获取滚动距离： scrollTop scrollLeft

参考资料：https://juejin.cn/post/6844904133921619982