##关系

window对象表示浏览器中打开的窗口

window.screen 对象包含有关用户屏幕的信息

document对象是window对象的一部分

##window window.innerHeight: 去除工具条与滚动条的窗口高度

window.innerWidth: 去除工具条与滚动条的窗口宽度 window.outerHeight:一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条） window.outerWidth:窗口的外部宽度，包括所有的界面元素（如工具栏/滚动）

##window.screen window.screen.height: 屏幕分辨率的高

window.screen.width: 屏幕分辨率的宽 window.screen.availHeight: 屏幕可用工作区高度，以像素计，减去界面特性，比如窗口任务栏 window.screen.availWidth: 屏幕可用工作区宽度，以像素计，减去界面特性，比如窗口任务栏 window.screenTop: 窗口相对于屏幕的Y坐标 window.screenLeft: 窗口相对于屏幕的X坐标

##client相关的高度 ###clientWidth&clientHeight:

元素可见部分高度, padding+content。 如果没有滚动条，即为元素设定的高度和宽度； 如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高。

1）假如无padding无滚动：

clientWidth=style.width

2）假如有padding无滚动：

clientWidth=style.width+style.padding*2

3）假如有padding有滚动，且滚动时显示的：

clientWidth=style.width+style.padding*2-滚动条宽度

###clientLeft&clientTop:

这2个返回元素周围边框厚度，如果不指定一个边框或者不定位该元素，其值就是0。 clientTop=border-top的border-width clientLeft=border-left的border-width

###兼容获取可视区域宽高 document.documentElement.clientWidth||document.body.clientWidth

documentElement对应HTML标签，

body对应BODY标签

##offset相关的高度 ###offsetWidth&offsetHeight:

元素的border+padding+content，该属性和其内部的内容是否超出元素大小无关，只和本来设定的border以及width和height有关。

如果没有滚动条，即为元素设定的高度和宽度；

如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高。

1）假如无padding无滚动：

offsetWidth=clientWidth=style.width

2）假如有padding无滚动：

offsetWidth=style.width+style.padding*2+border宽度*2 offsetWidth=clientWidth+

3）假如有padding有滚动，且滚动时显示的：

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

###offsetLeft&.offsetTop:

offsetParent: 1）如果当前元素的父级元素没有进行CSS定位(postion为absolute或relative)，offsetParent为body； 2）如果当前元素的父级元素中有CSS定位(postion为absolute或relative)，offsetParent取最近的那个父级元素；

在IE6/7中

offsetLeft=(offsetParent的padding-left)+(当前元素的margin-left) 在IE8/9/10及chrome中 offsetLeft=(offsetParent的margin-left)+(offParent的border宽度)+(offsetParent的padding-left)+(当前元素的margin-left) 在FireFox中 offsetLeft=(offsetParent的margin-left)+(offsetParent的padding-left)+(当前元素的margin-left)

##document scroll相关的高度 ###document.body的scrollWidth和scrollHeight 1）给定高度小于浏览器窗口

scrollWidth=浏览器窗口的高度 scrollHeight=浏览器窗口的高度

2）给定高度大于浏览器窗口，且内容小于给定高度 scrollWidth=给定宽度+内容的padding+margin+border scrollHeight=给定高度+内容的padding+margin+border

3）给定高度大于浏览器窗口，且内容大于给定高度 scrollWidth=内容宽度+内容的padding+margin+border scrollHeight=内容高度+内容的padding+margin+border

###某div的scrollWidth和scrollHeight 1）无滚动条：

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

2）有滚动条：

scrollWidth=实际内容宽度+padding*2 scrollHeight=实际内容高度+padding*2

###scrollLeft和scrollTop 当元素其中的内容超出其宽高时，元素被卷起的宽度和高度

##事件event的宽高 1）clientX和clientY：相对于浏览器(可视区左上角0,0)的坐标；

2）screenX和screenY：相对于设备屏幕左上角(0,0)的坐标； 3）offsetX和offsetY：相对于事件源左上角(0,0)的坐标； 4）pageX和pageY：相对于真个网页左上角(0,0)的坐标； 5）X和Y：ie属性，相对于用CSS动态定位的最内层包容元素；

##jQuery里的宽高 1）width()： 返回无单位， css("width")的结果有单位

2）innerWidth(), innerHeight() ：包括padding和border 3）outerWidth(), outerHeight() ：包括padding, border, margin 4) offset()：相对于document的当前坐标值 5）position()：相对于offsetParent的当前坐标值