一、window和document的区别是什么？
- window
1.window对象表示浏览器中打开的窗口。
2.window对象可以省略，如:
alert() 等价于 window.alert()
- document
1.document对象是window对象的一部分。如：
document.body 等价于 window.document.body
2.浏览器的html文档成为document对象。
二、window.location和document.location一样吗？
- window对象的location属性引用的是location对象，表示该窗口中当前显示文档的URL。
- document对象的location属性也是引用了location对象。
- 因此
window.location === document.location //true
location.herf === window.location.href === document.location.href
三、与window相关的宽高（不考虑window.document的情况下）
-
window.innerWidth（打开窗口的内部宽度）与window.outerWidth（打开窗口的外部宽度）
两者在此表示一样的值 -
window.innerHeight（打开窗口的内部高度）与window.outerHeight（打开窗口的外部高度）
window的内高与外高
3.window.screen包含有关用户屏幕的信息
- window.screen.height（整个屏幕的高。。固定值）
- window.screen.width（整个屏幕的宽。。固定值）
- window.screen.availHeight（可利用的高，即不包括浏览器Google属性栏。。固定值）
- window.screen.availWidth（可利用的宽，与window.screen.width是一样的。。固定值）
- window.screenTop（浏览器顶部距屏幕顶部的距离。。随浏览器的缩放以及位置决定）
- window.screenLeft（浏览器左侧距屏幕左侧的距离。。随浏览器的缩放以及位置决定）
四、与document相关的宽高（以document.body为例）
1. 与client相关的宽高
- document.body.clientWidth
- document.body.clientHeight
- document.body.clientTop
- document.body.clientLeft
clientWidth与clientHeight
1> 该属性指的是元素的可视部分宽度和高度，即padding + content。
2> 如果没有滚动条，即为元素设定的高度和宽度。
3> 如果出现滚动条，那么滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高。（注意：mac系统下滚动轴不占宽度）
总结：
假如无padding无滚动：clientWidth = style.width
假如有padding无滚动：clientWidth = style.width + style.padding＊２
假如有padding有滚动，并且滚动轴是显示的：clientWidth = style.width＋style.padding*2 - 滚动轴宽度
clientTop和clientLeft
这两个返回的是元素周围边框的厚度，如果不指定一个边框或者不定位该元素，它的值就是0.
总结：
这一对属性是用来读取元素的border的宽度和高度的。
clientTop = border-top的border-width（边框像素）
clientLeft = border-left的border-widrh（边框像素）
2. 与offset相关的宽高
- document.body.offsetWidth
- document.body.offsetHeight
- document.body.offsetTop
- document.body.offsetLeft
offsetWidth与offsetHeight
1> 这一对属性指的是元素的border + padding + content的宽度和高度。
2> 该属性和其内部的内容是否超出元素大小无关，只和本来设定的border以及width和height有关。
总结：
假如无padding 无滚动 无border：offsetWidth = clientWidth = style.width
假如有padding 无滚动 有border：offsetWidth = style.width+style.padding·2 + (border-width)·2 或者 offsetWidth = clientWidth + (border-width)·2
假如有padding 有滚动 有border：offsetWidth = style.width+style.padding·2 + (border-width)·2 或者 offsetWidth = clientWidth +滚动轴宽度 + (border-width)·2
offsetLeft与offsetTop
- 首先先要了解offsetParent这个属性：
1> 如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。
2> 如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。
- 这两个属性对于浏览器的兼容问题：
对照上面的公式，下面的例子可帮助深入理解：
3. 与scroll相关的宽高
- document.body.scrollWidth
- document.body.scrollHeight
- document.body.scrollTop
- document.body.scrolleft
scrollWidth 与 scrollHeight
注意：document.body的scrollWidth和scrollHeight 与 div中scrollWidth和scrollHeight是有点区别的。
<1> document.body的scrollWidth和scrollHeight
- 给定宽高小于浏览器窗口
1.scrollWidth通常是浏览器窗口的宽度
2.scrollHeight通常是浏览器窗口的高度- 给定宽高大于浏览器窗口，且内容小于给定宽高（有border需乘2）
1.scrollWidth：给定的宽度 + 其所有的padding、margin和border
2.scrollHeight：给定的高度 +其所有的padding、margin和border- 给定宽高大于浏览器窗口，且内容大于给定宽高（给定宽高有border不需乘2）
1.scrollWidth：内容宽度 + 其所有的padding、margin和border
2.scrollHeight：内容高度 + 其所有的padding、margin和border
<2> div的scrollWidth和scrollHeight
- 无滚动轴的情况
scrollWidth = clientWidth = style.width + style.padding · 2- 有滚动轴时
scrollWidth = 实际内容的宽度 + padding · 2
scrollHeight = 实际内容的高度 + padding · 2
scrollLeft 和 scrollTop（以div为例）
这对属性是可读写的，指的是当元素其中的内容超出其宽高的时候，元素被卷起的宽度和高度。默认都为0 。若改写的话也是可以的改变的。
