1.window和document的区别是什么啊？
简单来说，window就只是表示简单的浏览器窗口；
Window对象表示浏览器中打开的窗口；
Window对象是可以省略的，譬如：alert() == window.alert()；
Document对象是去除浏览器的菜单栏的那一块；
Document对象是Window对象的一部分，如document.body == window.document.body;
浏览器的HTML文档成为Document对象，HTML文档；
2.window.location 和 document.location一样吗？
window对象的location属性引用的是Location对象，表示该窗口中当前显示文档的URL。
document对象的location属性也是引用了Location对象
window.location === document.location //true
与window相关的宽高都是有哪些？
window.innerWidth ：差不多和outerWidth一样；
window.innerHeight ：只包括浏览器里面的高度；
window.outerWidth ：
window.outerHeight ：整个浏览器的高度，包括浏览器的菜单；
window.screen ：包含有关用户屏幕的信息；
window.screen.height
window.screen.width
window.screen.availHeight
window.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；这一对属性是用来读取元素的border的宽度和高度的。
小结：clientTop = border - top 的border - width
clientLeft = border - left 的border - width
2.与offset相关的宽高
document.body.offsetWidth / document.body.offsetHeight```
这一对属性指的是元素的border + padding + content的宽度和高度，该属性和其内部的内容是否超出元素大小无关，只和本来设定的border以及width和height有关
小结：假如无padding无滚动无border，offsetWidth = clientWidth = style.width；
假如有padding无滚动有border，
offsetWidth = style.width + style.padding*2 + (border-width)*2，offsetWidth = clientWidth + border宽度*2；
假如有padding有滚动，且滚动是显示的，有border，offsetWidth = style.width + style.padding*2 + (border - width)*2,offsetWidth = clientWidth + 滚动轴宽度 + border宽度*2
document.body.offsetLeft / document.body.offsetTop首先要了解一下 offsetParent : 如果当前元素的父级元素没有进行CSS定位（position为absolute或relative）,offsetParent为body； 如果当前元素的父级元素中有CSS定位（position为absolute或relative）,offsetParent取最近的那个父级元素； 在IE6/7中，offsetLeft = (offsetParent的padding-left) + (当前元素的margin-left)；在IE8/9/10以及chrome中，offsetLef = (offsetParent的margin-left) + (offsetParent的border宽度) + (offsetParent的padding-left) + (当前元素的margin-left)；在FireFox中，offsetLeft = (offsetParent的margin - left) + (当前元素的margin-left) + (offsetParent的padding - left)```
3.与scroll相关的宽高
document.body.scrollWidth / document.body.scrollHeight```
document.body的scrollWidth 和 scrollHeight 与div的scrollWidth 和scrollHeight是有点区别的。
在body中：
当给定宽高小于浏览器窗口，scrollWidth通常是浏览器窗口的宽度，scrollHeight通常是浏览器窗口的高度；
当给定宽高大于浏览器窗口，且内容小于给定宽高，scrollWidth是给定的宽度 + 其所有的padding、margin和border，scrollHeight给定的高度 + 其所有的padding、margin 和border；
给定宽高大于浏览器窗口，且内容大于给定宽高，scrollWidth内容宽度 + 其所有的padding、margin 和 border，scrollHeight内容高度 + 其所有的padding、margin和border。
在div中：
无滚动轴时，scrollWidth == clientWidth = style.width + style.padding*2;
有滚动轴时，scrollWidth == 是实际内容的宽度 + padding*2，scrollHeight == 是实际内容的高度 + padding*2
document.body.scrollLeft / document.body.scrollTop```
这对属性是可读写的，指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度。
4.style.width / style.height
obj.style.width / obj.style.height```
对于一个dom元素，他的style属性返回的是一个对象，这个对象中的任意一个属性是可读写的，style.width等于css属性中的宽度style.height等于css属性中的高度。
>documentElement 和 body的那些事
如果在js中console.log()分别输出
console.log(document); //document对象
console.log(document.documentElement); //html
console.log(document.body) //body
可以看出，
document.documentElement.childNodes[2] == document.body；```
document相关的宽高兼容性问题
client 相关宽高、offset 相关宽高、scroll相关宽高，所有浏览器都是支持的，但是某些浏览器的解析是不同的。
client相关宽高，各个浏览器解析都一样，当我们要获取可视区域的宽高时，
document.documentElement.clientWidth || document.body.clientWidth;
