关于js中获取盒子宽高的api

1. clientHeight/clientWidth 该api主要用来获取盒子不包括边框的宽高
   即 clientWidth = width + left/rightPadding 同时对于超出的内容它是不管的。
2. offsetHeigth/offsetWidth 该api与上面不同的一点是它是会获取盒子的外边框在内的宽高的，也就是
   说要比上面多一个边框的大小(该api也是我们经常使用的)
3. scrollHeight/scrollWidth 该api对于第一个也只有一个不同点，那就是如果盒子内的文本内容要比盒子本身要大，那么它会将超出的文本来作为宽高，也许咋一听可能这种情况很少见，但是如果碰到多行文本超出要做切割的情况，使用它会事半功倍，附上代码

if (contentRef.value.parentNode.offsetWidth > contentRef.value.offsetWidth) {
      isShow.value = true
} else {
      isShow.value = false
}

4. element.style.width/heigth 上面的都返回的是数字且只读，而这个厉害了，它是一个可写的字符串。但是它能获取行内的样式
5. window.innerWidth： window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
   从而得出 vw, 则是 window.innerWidth 不包含任务标题栏以及底部工具栏的浏览器区域大小。也就是说整个网页内容的大小，
   不受其它因素的影响。
6. element.getBoundingClientRect()：上面的都是属性，而这个是一个返回一个名为DOMRect的对象
   
   这个对象返回了许多属性，可按需使用
   x, y是该元素左上角相对于浏览器视口左上角的坐标
   bottom， left，right， top是该元素相对于浏览器视口左上角的距离
   width, height是该元素的宽度和高度