详解clientWidth，scrollWidth，offsetWidth，innerWidth，outerWidth

一、基本概念

1.document.documentElement.clientWidth：可视区屏幕宽度（你能看到的页面部分，不含滚动条）

2.document.documentElement.scrollWidth：内容可滚动宽度（不只是你能看到的部分，不含滚动条）

3.document.documentElement.offsetWidth：元素的内容宽度（不只是你能看到的部分，含滚动条/包含border）

4.window.innerWidth：窗口用来显示页面内容的宽度（包含滚动条，注意是浏览器窗口不是html页面，与页面无关）

5.window.outerWidth：窗口的整个实际宽度（包含你查看console.log时这样的控制台边栏）

二、大小对比

1.html默认，scrollWidth分内容超出页面可视区和不超出；

超出时：scrollWidth > offsetWidth >= clientWidth（很多页面不知有什么操作，元素内容明明超出可视区offsetWidth却等于clientWidth？）

不超出时：offsetWidth > scrollWidth = clientWidth

scrollWidth超出时，如果有margin也会加且仅加左侧的margin值，说白了就是一个节点可以在滚动条里滚动的宽度

2.document.documentElement.offsetWidth：指向html这个元素盒模型的宽度；（不包含margin谢谢）

就是html这个节点的大小，你可以手动改写宽度小于可视区，加上边线也不超过可视区，此时offsetWidth小于clientWidth&scrollWidth；

3.另附：关于height

①一个节点的height不包括它的padding、border

②然后innerHeight是包含了padding的高度值

③然后outerHeight是包含了padding + border的高度值