浏览器中的位置及宽高（chrome）

一、innerWidth、innerHeight、outerWidth、outerHeight

1、window.outerWidth表示整个浏览器窗口的宽度，包括侧边栏、窗口镶边和调正窗口大小的边框等；window.innerWidth为浏览器视口（vw）的宽度，包含垂直滚动条。
2、window.outHeight为浏览器的整个高度，包含菜单栏，地址栏，标题栏等；window.innerHeight为浏览器视口（vh）的高度，包含横向滚动条。
示意图：

二、clientWidth、clientHeight

1、clientWidth、clientHeight对于没有定义CSS或者内联布局盒子的元素为0，取值会四舍五入为整数。
2、Element.clientWidth 表示元素的内部宽度,包括内边距，但不包括垂直滚动条、边框和外边距。
3、Element.clientHeight表示元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。

三、offsetWidth、offsetHeight

1、内联布局也可以获取宽度和高度
2、HTMLElement.offsetWidth返回一个元素的布局宽度，包含border、padding、滚动条。
3、HTMLElement.offsetHeight返回一个元素的布局高度，包含border、padding、滚动条。

四、offsetTop、offsetLeft

1、HTMLElement.offsetParent返回一个指向最近的（指包含层级上的最近,并不是父元素）包含该元素的定位元素或者最近的。table,`td,th,body元素。fixed定位或display:none的元素返回null`。
2、 HTMLElement.offsetLeft返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。
3、HTMLElement.offsetTop返回当前元素相对于其 HTMLElement.offsetParent 元素的顶部内边距的距离。

五、clientLeft、clientTop

1、HTMLElement.clientLeft相当于border-left的宽度
2、HTMLElement.clientTop相当于border-top的宽度

六、事件相关属性clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY、x、y

1、Touch.clientX返回触点相对于可见视区(visual viewport)左边沿的的X坐标. 不包括任何滚动偏移.这个值会根据用户对可见视区的缩放行为而发生变化.
2、Touch.clientY返回触点相对于可见视区(visual viewport)上边沿的的Y坐标. 不包括任何滚动偏移.这个值会根据用户对可见视区的缩放行为而发生变化.
3、Touch.pageX返回触点相对于HTML文档左边沿的的X坐标. 和clientX 属性不同, 这个值是相对于整个html文档的坐标, 和用户滚动位置无关. 因此当存在水平滚动的偏移时, 这个值包含了浏览器水平滚动的偏移.
4、Touch.pageY返回触点相对于HTML文档上边沿的的Y坐标. 和clientY 属性不同, 这个值是相对于整个html文档的坐标, 和用户滚动位置无关. 因此当存在垂直滚动的偏移时, 这个值包含了浏览器垂直滚动的偏移.
5、Touch.screenX返回触点相对于屏幕左边沿的的X坐标. 不包含页面滚动的偏移量.
6、Touch.screenY返回触点相对于屏幕上边沿的Y坐标. 不包含页面滚动的偏移量.
7、Touch.offsetX事件对象与目标节点的内填充边（padding edge）在 X 轴方向上的偏移量。 --实验中的功能
8、Touch.offsetY事件对象与目标节点的内填充边（padding edge）在 Y 轴方向上的偏移量。 --实验中功能
9、x为clientX的简写，y为clientY的简写。
(图片来自https://www.cnblogs.com/19068...