引言
在 CSS 中，可以使用不同的属性和方法获取 DOM 元素的各种宽高，但是这些宽高分别在什么场景下使用？这就需要了解这些宽高的概念了，然而这些又是很容易混淆的。所以，本文就是对这些概念的一个小汇总，在概念混淆的时候方便查阅~
前置知识
$0、console.dir()
$0：在浏览器开发者工具中，表示当前选中的元素
console.dir()：以树状结构的形式展示一个对象的属性和方法
CSS 盒子模型
当讨论元素的宽高时，就会涉及到 CSS 盒子模型。所以这里对其进行简要的介绍，先看下图： 
这就是 CSS 盒子模型中的一个元素的组成，包括：内容、内边距、边框、外边距这四个部分。除内容外，内边距、边框和外边距都包括上下左右四个方向：padding-top、padding-bottom、padding-left、padding-right；border-top、border-bottom、border-left、border-right；margin-top、margin-bottom、margin-left、margin-right
如果想要了解更详细的，可以查阅 CSS盒子模型
元素的各种宽高
在了解了元素的盒子模型之后，就可以进入关于元素各种宽高的主题了。今天的主角有四对：width，height；clientWidth，clientHeight；offsetWidth，offsetHeight；scrollWidth，scrollHeight
首先，需要获取到 DOM 元素，JavaScript 提供了相应的 DOM API 来获取 DOM 节点：
- document.getElementById()
- document.getElementsByClassName()
- document.querySelector()
- document.getElementsByTagName()
获取方式举例：
html
<div class="elementId"></div>
js
const element = document.getElementById('elementId')width、height
width 和 height 就是盒子模型中内容部分的宽高，这个很好理解~
获取方式：
js
const width = element.style.width
const height = element.style.height注意：element.style.width 仅会返回直接在元素的 style 属性中设置的样式值，而不会返回通过 CSS 样式表或者其他方式设置的样式值
如果是通过 CSS 样式表或者 JavaScript 来设置宽度的，那么 element.style.width 将无法获取到值，所以只有通过内联样式设置的宽高 dom 才能获取到
clientWidth、clientHeight
clientWidth 和 clientHeight 表示：元素内容 + 内边距，不包括边框 border 和 外边距 margin
获取方式：
js
const clientWidth = element.clientWidth
const clientHeight = element.clientHeightoffsetWidth、offsetHeight
offsetWidth 和 offsetHeight 表示：元素内容 + 内边距 + 边框，不包括外边距 margin
获取方式：
js
const offsetWidth = element.offsetWidth
const offsetHeight = element.offsetHeightscrollWidth、scrollHeight
- 在元素内容没有超出换行时，scrollWidth、scrollHeight 和 clientWidth、clientHeight 返回的值一样，都表示：元素的宽高 + 内边距
- 在元素内容超出换行时，scrollWidth、scrollHeight 表示：文本内容的实际宽高 + 内边距
获取方式：
js
const scrollWidth = element.scrollWidth
const scrollHeight = element.scrollHeight