2019-09-17 浏览器、元素高宽相关

关于高宽有以下概念：(仅用宽度说明）

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、获取用来显示文档的高宽：

• window.innerHeight
• window.innerWidth

或者

document.body.clientWidth
document.documentElement.clientWidth

body是DOM对象里的body子节点，即 标签；
documentElement 是整个节点树的根节点root，即 标签；
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