开始表演
今天来聊一下两个相似的方法，它们就是：getBoundingClientRect()、getClientRects()。
只见它们俩手拉手地登上了舞台，一个鞠躬，便开始滔滔不绝起来。
自述
getClientRects()
“我来了，你看到我了，当然看到我咯，彪悍一个。”
“想知道怎么驾驭我吗？你想吗？像这样。”
let rectList = document.getElementById('box').getClientRects();
/*
我返回的是一个包含一个或多个 DOMRect 对象的数组；
哈哈，这也是我稍微彪悍的原因。
*/
“在这里，我要粗略讲下什么是DOMRect对象（也是ClientRect对象、TextRectangle对象）。它呢，是一个盒子的边界矩形，简单看就是一个包着内容的盒子。”
“在我这里，所有规则我说了算。”
“块级元素我认为就是一个整体，所以在我这里，块级元素直接返回盒子模型的矩形范围。”
“不过呢，行内元素会产生自动换行这类看似分割整体的歧义，所以，我会把行内元素根据它换行划分成多个盒子边界矩形。这也是我和我的兄弟——getBoundingClientRect的区别。也是我对我返回类型的一种解释吧。”
“每个盒子边界矩形都有些什么？能带给我们什么惊喜？哈哈，就让我的兄弟给你们说吧！我累了，坐会。”
getBoundingClientRect()
“终于到我了，想必等很久了吧，那我再等我清下嗓子，咳咳。开始咯！”
“你要像这样子使用我，而且我对块级元素和行内元素是一视同仁的，可能我心比较大吧。”
let rectObject = document.getElementById('box').getBoundingClientRect();
/* 返回的是一个 DOMRect（或者叫 TextRectangle、ClientRect） 对象：
[object DOMRect] {
bottom: 208,
height: 200,
left: 8,
right: 208,
top: 8,
200,
x: 8,
y: 8,
toJSON: function toJSON() {...}
}
*/
“忘了最重要的自我介绍了，那还是要说下的。”
“我是会返回元素的大小和它相对于视窗的位置，即，除了大小（width和height）其余的属性都是相对于视窗的左上角位置而言的，所以当存在滚动时，位置有可能是负值，还有一点，这些都是只读属性。”
图例：
图上白色区域的即是视窗区域，左上角为0，0点。
落幕
只见幕布徐徐落下，一胖一瘦相扶走下舞台。
题外话，第一次这么写，感觉很乱，说错的希望大家指出来，我会虚心改进。谢谢。