解析 offsetWidth、clientWidth

offsetWidth:
1. 获取元素的宽度。
2. 包含内容 + 内边距 + 边框的总宽度。
3. 当元素是display：none隐藏的时候就获取的是0。
4. 如果是图片或其他资源没有加载的时候，并且没有设置宽的时候，获取的大小就是0。
clientWidth
1. 获取元素的宽度。
2. 包含内容 + 内边距。
3. 行内元素为0。

1. offsetLeft： 获取一个元素的左边框外侧到其包含块的边框内部的距离。
2. offsetParent： 获取元素的最近定位父级。
3. clientLeft： 获取左边框的宽度。
4. scrollLeft： 获取或者设置元素的滚动条的位置。

获取窗口的高度：document.documentElement.clientHeight

获取文档的高度：document.documentElement.offsetHeight

获取系统滚动条:
1. ie6-：
  body的scrollTop
2. 高版本浏览器(ie7及以上)：
  html的scrollTop
3. 高版本浏览器（ie9及以上）
  window.pageYOffset
设置系统滚动条：
1. 可以直接对html或body的scrollTop属性直接设置
2. 也可以使用window.scrollTo(); 完美兼容的
  scrollTo():
  接受两个参数，一个是x滚动条位置一个是y滚动条位置

什么是包含块：绝对定位的元素相对于它的包含块进行定位。
如何确定一个元素的包含块，完全取决于它自身的position属性：
1. 如果一个元素自身的position属性是 static或者是relative：它的包含块就是离他最近的祖先元素或者是格式化上下文。
2. 如果一个元素自身的position属性是absolute，它的包含块就是离他最近的拥有定位属性（值不为static）的元素。
3. 如果一个元素自身的position属性是fixed，它的包含块就是viewport（视口）。
4. 如果由内向外找不到包含块条件的元素，那么html（根元素）被称作为初始包含块。

常见的浏览器有 IE 、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，我们平时称为五大浏览器。