背景
本人最近在公司中接触到了一个低代码的BI可视化项目，因此涉及到很多拖拽相关的知识，难免会与浏览器中元素的宽高距离打交道，在此之前一直对各种宽高距的概念很模糊，故在此已较为精简文字加以总结，以备后续查阅。如有错误的地方也欢迎指正。
一、width/height
1. clientWidth/clientHeight
clientWidth/clientHeight为元素不包含边框的宽高，也就是元素的内容宽高，因此其计算方式可根据元素box-sizing分为两种情况：
-
当
box-sizing为border-box时:- clientWidth = width - 左border - 右border
- clientHeight = height - 上border - 下border
-
当
box-sizing为content-box时:- clientWidth = width + 左paddig + 右padding
- clientHeight = height + 上paddig + 下padding
2. offsetWidth/offsetHeight:
offsetWidth/offsetHeight与clientWidth/clientHeight刚好相反，其为元素总的宽高，即包含边框的宽高，其计算方式也可根据元素box-sizing分为两种情况：
-
当
box-sizing为border-box时:- offsetWidth = width
- offsetHeight = height
-
当
box-sizing为content-box时:- clientWidth = width + 左border + 右border
- clientHeight = height + 上border + 下border
3. scrollWidth/scrollHeight：
offsetWidth/offsetHeight除了可视内容（clientWidth/clientHeight）以外，还包括由于overflow属性的设置溢出而在屏幕上不可见的内容。因此它也分为两种情况：
-
当在内容区没有溢出时：
- scrollWidth = clientWidth
- scrollHeight = clientHeight
-
在内容区发生溢出并且设置了
overflow:scroll等属性时:- scrollWidth = clientWidth + 溢出的内容区的宽度
- scrollHeight = clientHeight + 溢出的内容区的高度
注意这里的宽高也不包含边框
二、left/top
1. clientLeft/clientTop:
clientLeft/clientTop为元素的左/上边框宽度，即：
- clientLeft = 左boder
- clientTop = 上boder
2. offsetLeft/offsetTop:
offsetLeft/offsetTop为自身边框到最近的带有定位属性的父元素的左/上边框(不含边框)的距离
3. scrollLeft/scrollHeight:
scrollLeft/scrollHeight 为内容区到溢出部分左边或上边的距离(包括边框),即滚动条滚动距离
- scrollLeft = 左boder + 溢出的内容区的宽度
- scrollTop = 上boder + 溢出的内容区的高度
三、X/Y
-
ScreenX/ScreenY: 距离屏幕左/上边的距离 -
LayerX/LayerY: 距离最近的带有定位属性的父元素左/上边的距离(包括父元素边框) -
ClientX/ClientY: 距离浏览器视口左/上边的距离，不考虑溢出部分的宽/高 -
PageX/PageY: 距离浏览器视口左边的距离(ClientX/ClientY) + 溢出部分的距离(滚动条滚动的距离) -
OffsetX/OffsetY: 距离当前容器左边的距离(不包括容器的边框)
