一、window和document

  1. window
  2.     - 表示浏览器中打开的窗口
  3.     - window对象是可以省略的
  4. document
  5.     - 是window对象的一部分
  6.     - 浏览器的HTML文档称之为document对象
  7. 优先级
  8.     - document > documentElement > body

二、与window相关的宽高介绍

innerWidth/Height    ---------------------------------------只是页面部分
outerWidth/Height    ---------------------------------------包括浏览器工具栏
- 这两组是IE9+及主流浏览器支持的
- 一般情况下都会用clientWidth/Height替代使用

document.documentElement.clientWidth/Height || document.body.clientWidth/Height

三、与client相关的宽高

clientWidth/Height
    - 表示元素可视部分的宽度和高度,即content+padding
    - 若没有滚动条,即为元素设定的高度和宽度
    - 若出现滚动条,滚动条会覆盖元素的宽高,那就是本来的宽高减去滚动条的宽高 
clientLeft/Top
    - 返回的是周围边框的厚度
    - 若不指定一个边框或者不定位该元素,值就是0

可得三个公式：
(1)假设无padding,无滚动轴
    clientWidth = style.width
(2)假设有padding,无滚动轴
    clientWidth = style.width + style.padding*2
(3)假设有padding,有滚动轴,并且滚动轴是显示的
    clientWidth = style.width + style.padding*2 - 滚动轴宽度

四、与offset相关的宽高

offsetWidth/Height
    - 指的是元素的border + padding + content的宽度和高度
    - 该属性和其内部的内容是否超出元素大小无关,只和本来设定的border及width、height有关
offsetParent
    - 表示定位父级
    - 若当前元素的父级没有进行定位,则定位父级为body
    - 若当前元素的父级有定位,则就近取定位父级
    - 所有浏览器都解析,但是结果各不相同
offsetLeft/Top 
    - 距定位父级左、上的距离

可得三个公式：
(1)无padding、滚动轴、border
    offsetWidth = clientWidth = style.width
(2)有padding、border,无滚动轴
    offsetWidth = style.width + style.padding*2 + border*2 
(3)有padding、滚动轴、border,且滚动轴是显示的
    offsetWidth = style.width + style.padding*2 + border*2 + 滚动轴宽度

五、与scroll相关的宽高

scrollWidth/Height
    - body和div下的scrollWidth/Height是有区别的
    - 给定宽高大于浏览器窗口,且内容小于给定宽高,指的是padding+margin+border+content

在某div中scrollWidth/Height
    - 无滚动轴时
        scrollWidth = clientWidth
    - 有滚动轴时
        scrollWidth = 实际内容的宽度 + padding*2

scrollTop/Left -> 可读写的 -> 指的是超出时被卷起的宽高度

六、Event对象的五种坐标

(1)clientX/Y - 相对于浏览器
(2)screenX/Y - 相对于设备屏幕
(3)offsetX/Y - 相对于事件源
(4)pageX/Y   - 相对于整个网页
(...)

七、JQ相关宽高

width() - width
    - window/document 传值无效
    - 普通元素 value可以进行传值
    - 与css('width')的区别是返回结果无单位

innerWidth() - padding+width
    - window/document 传值无效
    - 普通元素 value可以进行传值

outerWidth() - padding+width
outerWidth(true) - padding+margin+width

scrollTop() - 相对于纵向滚动条上面的距离
scrollLeft() - 相对于水平滚动条左边的距离

offset() - 相对于body左上角的left/top值

position() - 相对于定位父级的当前坐标值