Height、width系列

1、scrollHeight、clientHeight、offsetHeight

The Element.scrollHeight read-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow.
The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
The HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, as an integer.

1、如果没有滚动条，scrollHeight 的高度跟 clientHeight 的高度相同。
利用这个特点，可以判断这个元素有没有出现（垂直）滚动条

if (Element.scrollHeight > Element.clientHeight) {
    // 可以解决模态框出现/消失的抖动
    // document.documentElement.style.marginRight = `15px`
    //  document.documentElement.style.overflow = `15px`
}

2、三者都包括 padding , 但 offsetHeight 包括 border ，scrollHeight、clientHeight 不包括border
3、上面三个值都是整数而且都是只读属性 ，获取更精确的数值，可以使用
element.getBoundingClientRect()。

2、window.innerWidth、window.outerWidth

window.innerWidth is width of the browser window viewport including, if rendered, the vertical scrollbar
Window.outerWidth gets the width of the outside of the browser window. It represents the width of the whole browser window including sidebar (if expanded), window chrome and window resizing borders/handles.

1、这两个是 window 的属性，前者是视口的高度（不准确），后者是这个浏览器的高度。
2、document.documentElement html文档的根元素
document.documentElement.clientWidth 表示的是视口的宽度，并非<html>的宽度。区别可以通过设置
```
 html {
   width: 10%;
 }
 // 用这个CSS很容易理解viewport和<html>元素的区别：
 // viewport处于 `html`的外层，是无法css设置的
```
document.documentElement.clientWidth 与 window.innerWidth 的区别在于是否包含滚动条。window.innerWidth 是包含滚动条的。所以👆说不准确。 document.documentElement.clientWidth才是真正的视口的宽度。

测量<html>可以用
```
document.documentElement.offsetWidth/Height
```
3、window.resize() 是可以改变 window 的大小的。

参考文章
1、A tale of two viewports — part one

Height、width系列

1、scrollHeight、clientHeight、offsetHeight

2、window.innerWidth、window.outerWidth

推荐阅读更多精彩内容