JS距离的理解

偏移量

offsetWidth    元素在水平方向上占用的空间大，包括元素的宽度、可见的垂直滚动条宽度、左边框高度和右边框高度 

                       offsetWidth=width+padding+border

offsetHeight   元素在垂直方向上占用的空间大小，包括元素的高度、可见的水平滚动条宽度、上边框高度和下边框高度

                       offsetHeight=height+padding+border

offsetLeft       元素相对于父级对象的左边距

offsetTop       元素相对于父级对象的上边距

客户区大小

clientWidth ：浏览器可见区域的宽度；clientWidth=width+padding

clientHeight：浏览器可见区域的高度；clientHeight=width+padding

滚动大小

scrollWidth：元素内容的总宽度(元素可以滚动的区域)；

scrollHeight：元素内容的总高度；

scrollLeft :  被隐藏在内容区域左侧的像素距离
scrollTop : 被隐藏在内容区域顶部的像素距离(滚动跳滚动距离，可写)

其他

clientY:当鼠标事件发生时，鼠标相对于浏览器Y轴的位置（这个不等于页面的距离），也就是浏览器的左上角

screenY:当鼠标时间发生时，鼠标相当于显示屏Y轴的位置，也就是电脑屏幕的左上角

pageX:当鼠标点击的时候发生，鼠标相对于整个文档的X轴的距离，也就是整给页面的左上角

offsetX:当鼠标事件发生时，鼠标相对于事件源Y轴的位置

使用方法envent对象.offsetX

对象距离父级左侧和顶部的距离     offsetLeft，offsetTop （边距）

对象可视区域的宽度和高度     clientWidth，clientHeight   clientWidth=width+padding

对象滚动宽度和高度                scrollWidth，scrollHeight    （对象的实际内容的宽度，不包边线宽度）

对象左侧和顶部滚动的距离     scrollLeft，scrollTop   

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;

网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);

网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;

网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;

s = " 网页被卷去的高(ff)：" document.body.scrollTop;
s = " 网页被卷去的高(ie)：" document.documentElement.scrollTop;

网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;

屏幕可用工作区高度：window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

补充：2019/2/21

window.screen.availWidth  返回浏览器窗口可占用的水平宽度（单位：像素）
window.screen.availHeight 
window.screen.width 返回当前屏幕宽度(分辨率值) 
window.screen.height 返回当前屏幕高度(分辨率值) 

一个是分辨率一个是可占用，一般情况下俩者水平方向值是相同的，但高度就不一定了因为大多数的垂直方向，都有一个任务栏，占了一定的PX，所以availWidth会小一点，所以一般情况下用Width是应为好记，加减少误差，但是移动端一般情况是是一样的

window.screen.availWidth 于document.body.offsetWindow的区别就是前者加了margin

页面区域宽高

项目当中：
原来是W3C的标准在作怪啊，认为选中的body
如果在页面中添加这行标记的话 在IE，ireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度