#尺寸总结
window 和 screen 相关
window
window.innerWidth：视口的宽。window.innerHeight：视口的高。window.outerWidth：浏览器窗口的宽。window.outerHeight：浏览器窗口的高。
兼容性，这四个属性在 IE9 及以上才支持。
###screen
screen.width：屏幕的宽。screen.height：屏幕的高。screen.availWidth：可利用的宽，等于屏幕的宽。screen.availHeight：可利用的高，等于屏幕的高减去 mac 顶部栏或 windows 底部栏。screenTop：浏览器窗口左上角到屏幕上边缘的距离。screenLeft：浏览器窗口左上角到屏幕左边缘的距离。screenX：等于screenLeft。screenY：等于screenY。
没有兼容性问题。
###元素相关
client-*
Element.prototype.clientWidth- 如果元素没有设置宽：宽由内部元素决定或者块级元素的宽会占满父元素。
- 如果有滚动条
clientWidth= 元素宽 +padding（左右） - 滚动条
- 如果没有滚动条
clientWidth= 元素宽 +padding（左右）
Element.prototype.clientHeight- 同
clientWidth区别是没有设置高时仅由内部元素决定。 Element.prototype.clientTop- 等于
border-top Element.prototype.clientLeft- 等于
border-left
没有兼容性问题，各个浏览器表现一致。但是要注意 mac 和 windows 下滚动条策略不同，windows 下默认有滚动条，而 mac 下只有滚动时才有滚动条。
offset-*
HTMLElement.prototype.offsetWidth- 如果元素没有设置宽：宽由内部元素决定或者块级元素的宽会占满父元素。
offsetWidth= 元素宽 +padding（左右）+border（左右）HTMLElement.prototype.offsetHeight- 同
offsetWidth区别是没有设置高时仅由内部元素决定。 HTMLElement.prototype.offsetParent：offsetParent是该元素父元素中最近的定位元素。- 注意很多书上讲没有定位的父元素，就以
body来计算，这是错误的，应该是以documentElement来计算。本质上来看documentElement也是父级元素，并没有违反上面一条规则。 HTMLElement.prototype.offsetTop- 当前元素内容区域（包括border）顶部到
offsetParent内容区域（不包括border）顶部的距离。 HTMLElement.prototype.offsetLeft- 当前元素内容区域（包括border）左边缘到
offsetParent内容区域（不包括border）左边缘的距离。
offsetWidth和offsetHeight基本没有什么兼容性问题，而offsetTop和offsetLeft在不同浏览器下的表现不太一样。但是测试了新的 chrome、fireFox 是一样的，都是上面所说的规则。
scroll-*
Element.prototype.scrollWidth- 如果元素没有设置宽：宽由内部元素决定或者块级元素的宽会占满父元素。
- 内容区域小于元素的宽高时，等于
clientWidth。 - 内容区域大于元素的宽高时，等于实际内容的宽度 + padding（两部分）。
Element.prototype.scrollHeightElement.prototype.scrollTop- 可读写
Element.prototype.scrollLeft- 可读写
两个特殊的元素 docmuentElement 和 body
document.documentElement.clientWidth始终为视口的宽。document.documentElement.clientHeight始终为视口的高。document.documentElement.offsetWidth始终为视口的宽度。document.documentElement.offsetHeight高度由内部元素撑起。document.body.clientWidth没有宽则根据documentElement减去margin和border计算，有宽则直接拿来计算。document.body.clientHeight没有宽则根据内部元素撑起的高度进行计算，有高则直接拿来计算。document.body.offsetWidth没有宽则根据documentElement减去margin计算，有宽则直接拿来计算。document.body.offsetHeight没有宽则根据内部元素撑起的高度进行计算，有高则直接拿来计算。document.body.scrollWidthdocument.body.scrollHeight
规则：（注意下面的规则对于的宽高是独立的）
- 当给定的宽高小于视口的宽高则返回的是视口的宽高。（fireFox 下直接进入 2、3 两个判断）
- 当给定的宽高大于视口的宽高，并且内容区域小于给定的宽高，也就是没有滚动条出现，则返回的是给定的宽高加上对应的 margin、padding、border。
- 当给定的宽高大于视口的宽高，并且内容区域大于给定的宽高，也就是有滚动条出现，则返回的是内容区域的宽高加上对应的 margin、padding、border。
document.documentElement.scrollWidthdocument.documentElement.scrollHeight
规则：
- 当 body 的
scrollHeight小于视口的高则返回的是视口的高。 - 当 body 的
scrollHeight大于视口的高则返回的是 body 的scrollHeight。 - 宽的话始终等于视口的宽。
在 fireFox 和 chrome 表现不一致，上面写到的都是 chrome 中的规则。
获取视口大小的兼容性写法
本来按上面写的 document.documentElement.clientWidth 才是正确的，这么做主要是为了兼容低版本浏览器或者没有加 doctype 的一些情况：
let w = document.documentElement.clientWidth || document.body.clientWidthlet h = document.documentElement.clientHeight || document.body.clientHeight
Event 的五个坐标
clientX、clientY相对于视口。screenX、screenY相对于屏幕。offsetX、offsetY相对于事件源。pageX、pageY相对于页面。X、Y相对于 Css 动态定位最内层的包容元素。（chrome 中等于clientX、clientY，IE 下默认等于clientX、clientY，但是设置了position则和offsetX、offsetY相等）