关于元素大小位置等信息的一些属性。有： clientLeft和clientTop clientWidth和clientHeight offsetLeft和offsetTop offsetParent

关于元素大小位置等信息的一些属性。有：
clientLeft和clientTop
clientWidth和clientHeight
offsetLeft和offsetTop
offsetParent
offsetWidth和offsetHeight
scrollLeft和scrollTop
scrollWidth和scrollHeight

clientLeft,clientTop:表示内容区域的左上角相对于整个元素左上角的位置（包括边框）。(取决于边框的像数值？)

clientWidth,clientHeight:内容区域的宽高，不包括边框宽度值。

offsetLeft,offsetTop:相对于最近的祖先定位元素。

offsetParent:某元素的父元素 例如：this.offsetParent.tagName.toLowerCase() 得到body…

offsetWidth,offsetHeight 整个元素的尺寸(不包括变宽的宽度)

scrollLeft,scrollTop:元素滚动的大小

scrollWidth,scrollHeight:整个内容区域的宽度(包括需拉动滚动条隐藏起来的那些部分) scrollTop+clientWidth

scrollWidth:获取对象的滚动宽度
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标

scrollHeight： 对象的滚动高度（滚动条的高度，可滚动的高度）

scrollWidth： 对象的滚动宽度（同上）

scrollLeft： 对象左边界和窗口中目前可见内容的左端之间的距离（滚动条已滚动的距离）

scrollTop： 对象最顶端和窗口中可见内容的最顶端之间的距离（同上）

offsetHeight： 对象相对于版面或offsetParent 的高度（可见部分的宽度加上滚动条实体的宽度）

offsetWidth： 对象相对于版面或offsetParent 的宽度

offsetLeft： 对象相对于版面或由 offsetParent 左侧位置

offsetTop：对象相对于版面或由 offsetTop 顶端位置

clientX： 相对文档的水平坐标

clientY： 相对文档的垂直坐标

clientWidth：相对文档的宽度（可见部分的宽度）

clientHeight：相对文档的高度

event.offsetX： 相对容器的水平坐标

event.offsetY ： 相对容器的垂直坐标

鼠标事件
鼠标事件有下面这几种：

1. onclick
   鼠标点击事件

box.onclick = function(e){
console.log(e)
}
1
2
3
2. onmousedown
鼠标按下事件

box.onmousedown = function(e){
console.log(e)
}
1
2
3
3. onmouseup
鼠标松开事件

box.onmouseup = function(e){
console.log(e)
}
1
2
3
4. onmousemove
鼠标移动事件

box.onmousemove = function(e){
console.log(e)
}
1
2
3
5. onmouseover
鼠标经过事件

box.onmouseover = function(e){
console.log(e)
}
1
2
3
6. onmouseout
鼠标划出事件

box.onmouseout = function(e){
console.log(e)
}
1
2
3
根据以上打印的e的信息，大致为：

由鼠标事件（MouseEvent）可以发现：
其中包含了许多的坐标，且每个坐标的含义都不一样。下面我们来挨个介绍常用的坐标，以及它们的含义。

一、clientX、clientY
点击位置距离当前body可视区域的x，y坐标

二、pageX、pageY
对于整个页面来说，包括了被卷去的body部分的长度

三、screenX、screenY
点击位置距离当前电脑屏幕的x，y坐标

四、offsetX、offsetY
相对于带有定位的父盒子的x，y坐标