Window对象和document对象的区别
1、window对象表示浏览器中打开的窗口
2、window对象可以省略，比如alert()也可以写成window.alert()
Document对象是window对象的一部分
浏览器的HTML文档成为dicument对象
Window.location和document.location
Window对象的location属性饮用的是location对象，表示该窗口中当前显示文档的URL
Document对象的location属性也是引用了location属性也是引用了location对象
Window.location===document.location//true
与window相关的宽高介绍
Window.innerWidth//浏览器窗口的内部宽度
.innerHeight//浏览器窗口的内部高度
.outerWidth
.outerHeight
Window.screen包含用户屏幕相关信息
.screen.height
.screen.width
.screen.availHeight
.screen.availWidth
Window.screenTop
Window.screenLeft
与document相关的宽高介绍
1、Client
document.body.clientWidth和document.body.clientHeight
指元素的可视部分宽度和高度，即padding+content.
若没有滚动条，即为元素设定的宽高
若有滚动条，则为原来宽高减去滚动条的宽高
无padding无滚动：clientWidth=style.width
有padding无滚动：clientWidth=style.width+style.padding*2
有padding有滚动：clientWidth=style.width+style.padding*2-滚动条宽度
document.body.clientLeft和document.body.clientTop
指元素周围边框的厚度，如果不指定边框或不定位元素，值为0
clientTop=border-top的border-width
clientLeft=border-left的border-width
2、Offset
offsetWidth和offsetHeight
指元素的border+padding+content的宽度和高度
该属性和内部的内容是否超出元素大小无关，只和设定的border以及width和height有关
无padding无滚动无border
offsetWidth=clientWidth=style.width
有padding无滚动条有border
offsetWidth=clientWidth+border宽度*2=style.width+style.padding*2+(border-width)*2
有padding有滚动条有border
offsetWidth=style.width+style.padding*2+(border-width)*2=clientWidth+滚动轴宽度+border宽度*2
offsetLeft和offsetTop
如果当前元素的父元素没有定位，则offsetParent为body
如果有定位，offsetParent取最近的父元素
3、Scroll
scrollWidth和scrollHeight
如图
scrollTop
scrollLeft
