关于高宽有以下概念：(仅用宽度说明）
window.screen.width 物理屏幕宽度
window.outerWidth 浏览器作为一个软件占的宽度,注意，即使将浏览器一部分放在屏幕外，值还是一样的
window.innerWidth 浏览器中用来展示文档（网页）内容的区域的宽度
Element.offsetWidth、Element.scrollWidth
前者代表文档内元素的包含元素内容宽度、内边距、边框和元素滚动条的宽度
后者代表文档内元素的内容宽度 + 溢出内容宽度 （不包含：边框和元素滚动条的宽度）
Element.clientWidth
文档内元素的包含元素内容宽度、内边距（不包含：边框和元素滚动条的宽度）
getComputedStyle(ele,null).width //ele为元素
元素内容宽度
经验证，以上获取到的宽度都与元素是否完全在可见区域内没有关系。
对于一个元素而言：
clientWidth： border以内的部分（不含border、滚动条)；可视的内容宽度+可视的padding 宽度，如果出现滚动条，滚动条会占用一些可视宽度，则值会减小
（其实就是一个元素提供的内部视口）
scrollWidth： border以内的部分，不过包含未显示出来的部分（不含border、滚动条）
offsetWidth： margin以内的部分（不含margin）；即元素在浏览器中的可视占用宽度
有的元素虽然被其它元素遮挡了部分，但被遮挡的部分还是视为可视宽度计算；
滚动条出现在 border和padding之间；
不同浏览器实现可能有差异。
大概存在以下关系：
1、获取整个浏览器的高宽：
window.outerHeight //此处浏览器占满了整个屏幕，所以值和屏幕的高宽的值是一样的
1080
window.outerWidth
1920
2、获取用来显示文档的高宽：
或者
document.body.clientWidth
document.documentElement.clientWidth
body是DOM对象里的body子节点，即 <body> 标签；
documentElement 是整个节点树的根节点root，即<html> 标签；
clientWidth 是元素的内容和padding值，没有算边框
document.body.clientWidth 和 document.documentElement.clientWidth获取的值可能会不同。(如果我把body和html之间设置了margin)
https://www.imooc.com/qadetail/108708
Element.clientWidth
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientWidth
主要是记住两点：
一、body是html的子元素
二、clientWidth 计算的是 元素的内部距离，包含margin，但不包含border，所以width<clientWidth
