js宽高

window.innerHeight 表示文档高度 可见区域高度 不是文档的总高 //ie9以上兼容

window.outerHeight 表示浏览器窗口高度包括菜单栏 

window.screen.height 表示屏幕分辨率的高度

window.screen.width 表示屏幕分辨率的宽度

window.screen.availHeight 表示window操作系统下出去任务栏的高度

window.screen.screenTop 表示浏览器窗口上边距屏幕顶端的距离 

window.screen.screenLeft 表示浏览器距离屏幕左边的距离 

document.clientWidth 表示文档可视区域宽度 

document.clientHeight 表示文档可见区域的高度  

元素dom对象的clientWidth 和clientHeight的宽高原理如下：

假如无滚动条 无padding clientWidth=style.width

假如有padding无滚动条

clientWidth=style.width+style.pading*2

假如有滚动条 有padding

clientWidth = style.width+style.padding*2-滚动条宽度 （mac系统滚动条宽度为0 win7滚动条有宽度）

document.clientLeft就是body的border-left值线条宽度

document.clientTop就是body的boder-top的值线条宽度

dom对象的.clientLeft clientTop也是border的宽度

offsetHeight ， offsetWidth 等于 padding+border+content，该属性和元素内部内容是否超出元素内部是没有关系的，只和本来设定的border width padding有关

假如offsetWidth无滚动条无padding 无border

offsetWidth = clientWidth = style.width

假如有padding 有border 无滚动条

offsetWidth = clientWidth+border-width*2 

offsetWidth = style.width+padding*2+border-width*2

假如有padding 有border 有滚动条

offsetWidth = style.width+style.padding*2+style.border*2+滚动条宽度

offsetWidth = clientWidth + border-width*2+滚动条宽度

offsetTop offsetLeft 依赖于offsetParent

1 如果当前元素的父元素没有css定位（relative basolute） offsetParent为body

2 如果当前元素的父元素有css定位，offsetParent取最近的那个父元素

但是offsetLeft offsetTop 存在浏览器兼容问题 

doucment.bosy.scrollWidth 与document.body.scrollHeight，如果给定的body 的width height 小于浏览器窗口的宽高，那么doucment.bosy.scrollWidth 与document.body.scrollHeight就是浏览器的宽高，

给定宽高大于浏览器窗口，且内容小于给定宽高，

scrollWidth = 给定的宽度+所有padding+ 所有margin+所有padding

div的scrollWidth 在有滚动条的情况下的值是实际内容的宽度，超出了offsetWidth的宽度

无滚动轴时

scrollWidth = clientWidth = style.width + style.padding*2

有滚动轴时

scrollWidth = 实际内容的宽度+style.padding*2

scrollTop scrollLeft 指的是内容被卷起的高度和宽度，内容超过div 或可是区域时

当内容高度大于div的height 就出现滚动条，当设置div为overflow为hidden时，只显示height高度内容  其余多出部分隐藏

事件对象event相关坐标介绍

event.clientX和clientY表示当前鼠标点距离浏览器（可视区域）的坐标位置（距离可视区域的距离）

screenX，screenY表示当前鼠标点相对于设备左上角的坐标位置（距离左上角的距离）

offsetX，offsetY表示事件源的位置，比如div内点击事件，表示当前点击点距离点击div的距离

pageX，pageY表示相对于整个网页左上角的坐标（距离）有滚动轴，滚上去相对于网页左上角的距离就用该属性

X,Y返回的结果和clientX,clientY的结果是一样的但是该属性存在浏览器兼容问题

window.screenX和window.screenY的值和window.screenLeft window.screenTop的值是一样的都是表示浏览器窗口到设备的距离

getBoundingClientRect()可以直接获取该div到浏览器可视区域顶部的距离，不存在浏览器兼容问题，所以不用offsetLeft offsetTop 这两个值 因为存在兼容问题

jquery相关宽高
width（）表示元素的windth宽度，不是内容的宽度
innerwidth（）width+padding*2
ourterwidth（）width+padding*2+border*2
ourterwidth（true）width+padding*2+border*2+margin*2


window document是不能通过jquery设置宽高的，也就是说不能通过width（）innerwidth（）ourterwidth（）设置window document的宽高 这是无效的 只能获取
对于普通dom元素是可以获取 设置 的width（）innerwidth（）ourterwidth（）


css（“width”）返回的长度带px单位
width（）返回的长度不带px单位 这是和css的区别

scrollTop（）返回卷起的高度
scrollLeft（）返回左侧卷起的高度


offset（）返回相对于document的当前坐标值
相对于body左上角的left top的值
postion（）的值如果父元素设置了position：relative fixed absolute 那么就是距离父元素的距离
如果没有设置那么和offset（）的值相等，就是距离body的top left的值

($window).height()返回窗口高度
($document).height()返回整改文档的高度