一、基本概念
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的高度值