JS的各种宽高到底指什么

首先搞清楚window 和document的区别。
window对象表示浏览器中打开的窗口。
document对象属于window对象的一部分。

与window相关的宽高

• window.innerHeight/innerWidth
  这两个属性指的是浏览器页面部分的宽高；

• window.outerHeight/outerWidth
  此属性指整个浏览器所占据的宽高，innerHeight包括了页面部分以及上部的地址栏以及title部分，也就是整个浏览器的高度。

window.screen对象包含有关用户屏幕的信息

此对象包含以下属性：

• window.screen.height/width
  这两个宽高表示的是用户屏幕的宽高。比如我的显示器的这两个属性分别是1080，1920，与浏览器宽高无关；
• window.screen.availHeight/availWidth
  表示用户屏幕可利用的宽高；
• window.screenTop/screenLeft
  分别表示浏览器窗口距离屏幕上边和左边的距离。

与document相关的宽高

1.与client相关的宽高

• clientWidth和clientHeight
  该属性指元素可视区域的宽度/高度，可视区域不包括滚动轴和border。（padding + content - scrollbar）
  注意： 在mac系统下，滚动轴默认不可见，故不用减去滚动轴部分。
• clientLeft 和clientTop
  该属性指的是元素周围边框的厚度，即返回的是元素border的相关信息。

2.与offset相关的宽高

• offsetWidth与offsetHeight
  该属性指的是元素当前所占有的全部宽高（border + padding + content）。
  该属性和元素内容是否超出元素大小无关，只与最初设定的border、width、height有关。
• offsetLeft和offsetTop
  offsetParent：
  1.若当前元素的父级元素没有进行定位，默认的static除外，元素的offsetParent为body。
  2.若存在定位，则offsetParent为距元素最近的已定位的父级元素。
  IE6/7
  offsetLeft = (offsetParent的padding-left) + (当前元素的margin-left)；
  IE8/9/10、Chrome
  offsetLeft = (offsetParent的margin-left) + (offsetParent的border-left) + （offsetParent的padding-left） + (当前元素的margin-left)；
  FireFox
  offsetLeft = (offsetParent的margin-left) + (offsetParent的padding-left) + (当前元素的margin-left)

3.与scroll相关的宽高

• document.body.scrollWidth / scrollHeight
  1.元素给定宽高小于浏览器窗口，这两个属性分别指浏览器窗口的宽高
  2.元素给定宽高大于浏览器窗口，且大于元素内容的宽高，这两个属性分别指的是元素的width / height + （margin + padding + border）× 2
  3.元素给定宽高大于浏览器窗口，且小于元素内容的宽高，这两个属性指的是元素内容宽高 + 内容的（border + padding + margin） × 2 + 元素左侧 / 顶部 （margin + border + padding）
• 在某div中的scrollWidth和scrollHeight
• 无滚动轴时：
  scrollWidth = style.width + style.padding × 2 = clientWidth;
• 有滚动轴时：
  scrollWidth = 实际内容宽度 + padding × 2 ；
  scrollHeight = 实际内容高度 + padding × 2；
• scrollLeft和scrollTop
  指的是当元素内容宽高超出元素宽高时元素被卷起的宽高，可读写，默认情况下，也即滚动条滚动的距离。