位置以及各种度量方法

页面位置属性

pageX,pageY

鼠标在页面上的位置，从页面的左上角开始，以页面为参考点，不随着滚动条的移动而改变；

FF特有，IE没有。pageY = clientY+scrollTop-clientTop;

clientTop=为自身border高度，border - Top

clientX,clientY

鼠标在页面上可视区域的位置，比如：若把浏览器缩小，让Y轴上出现滚动条，clientY的值可能会变小；而pageY却没有变化。

screenX,screenY

鼠标在电脑屏幕上的位置，从屏幕左上角开始计算。

offsetX,offsetY

IE特有，鼠标相对于触发事件的元素的位置，以元素盒子模型的内容区域的左上角为参考点，如果有border，可能出现负值。

layerX，layerY

FF特有，,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点
也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就幸福地生活在一起^-,几乎相等,唯一不同就是一个从border为参考点,一个以内容为参考点。

FF从border开始,

x,y

鼠标在电脑屏幕上的位置；

x/y:IE特有,这个本来和layerX/layerY的作用基本一样,但是IE的当前坐标选择十分混乱,能不用就不用,不讨论

网上别人总结的关于这六个纠结的纠结表..

1. offsetX/offsetY：W3C- IE+ Firefox- Opera+ Safari+ chrome+
2. x/y：W3C- IE+ Firefox- Opera+ Safari+ chrome+
3. layerX/layerY：W3C- IE- Firefox+ Opera- Safari+ chrome+
4. pageX/pageY：W3C- IE- Firefox+ Opera+ Safari+ chrome+
5. clientX/clientY：W3C+ IE+ Firefox+ Opera+ Safari+ chrome+
6. screenX/screenY：W3C+ IE+ Firefox+ Opera+ Safari+ chrome+

只有clientX和screenX 皆大欢喜是W3C标准.其他的,都纠结了.
最给力的是,chrome和safari一条龙通杀!完全支持所有属性.其中(offsetX和layerX都是以border为参考点)

scrollTop

**Element.scrollTop** 属性可以获取或设置一个元素的内容垂直滚动的像素数。

一个元素的 scrollTop 值是这个元素的顶部到视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

Element.scrollHeight 只读

返回类型为： Number，表示元素的滚动视图高度。

Element.scrollLeft

返回类型为：Number，表示该元素横向滚动条距离最左的位移.

Element.scrollLeftMax 只读

返回类型为： Number，表示该元素横向滚动条可移动的最大值

Element.scrollTop

返回类型为：Number ，表示该元素纵向滚动条距离

Element.scrollTopMax 只读

返回类型为：Number ，表示该元素纵向滚动条可移动的最大值

Element.scrollWidth 只读

返回类型为： Number ，表示元素的滚动视图宽度。

clientTop

一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。clientTop 是只读的。

一个元素上边框的宽度，也就是该元素的上边界border的宽度；

同理： oDiv.clientLeft 一个元素左边界border的宽度；

Element.clientHeight 只读

返回Number 表示内部相对于外层元素的高度.

Element.clientLeft 只读

返回Number表示该元素距离它左边界的宽度.

Element.clientTop 只读

返回 Number 表示该元素距离它上边界的高度.

Element.clientWidth 只读

返回Number 表示该元素它内部的宽度.

innerHeight 和innerWidth

　		// content
        $('.demo1').width()
        
        // content+padding
        $('.demo1').innerWidth();//200+100*2
        
        // content+padding+border
        $('.demo1').outerWidth();//200+100*2+5*2
        
        // content+padding+border+margin
        $('.demo1').outerWidth(true);//200+100*2+5*2+5*2
        
        height,innerHeight(),outerHeight(),outerHeight(true)同理。

参考API网址：https://developer.mozilla.org/zh-CN/docs/Web/API/Element