offset
一句话：除了 margin 我们都要。
offsetWidth & offsetHeight
offsetWidth = cssWidth + padding + border;
offsetHeight = cssHeight + padding + border;
注意：如果将元素的box-sizing设置为border-box，offsetWidth 就等于 cssWidth。
举个例子：
#wrapper{ 100px; height:100px; padding:10px; margin:4px; border:1px solid red; } <div id='wrapper'></div>
输出的结果：
wrapper's offsetHeight：122px wrapper's offsetWidth：122px
offsetLeft & offsetTop
offsetLeft & offsetTop = 相对祖先元素（position 不为 static 的元素）的偏移量；
举个例子：
wrapper 未设置 position
#wrapper{ 100px; height:100px; padding:10px; margin:4px; border:1px solid red; } #content{ 50px; height:50px; padding:5px; margin:3px; border:1px solid red; } <div id='wrapper'> <div id="content"></div> </div>
输出的结果：
wrapper's offsetLeft：4px wrapper's offsetTop：4px content's offsetLeft：18px（相对于 html 的偏移量） content's offsetTop：18px
将wrapper 的 position 设置为 relative
#wrapper{
100px;
height:100px;
padding:10px;
margin:4px;
border:1px solid red;
position:relative;
}
输出结果
content's offsetLeft：13px（相对于 warpper 元素的偏移量） content's offsetTop：13px
client
一句话：等于 offset 去掉 border 和滚动条。
clientWidth & clientHeight
offset 减去 border 和滚动条的宽度就等于 client。
clientWidth = offsetWidth - border - scrollBar；
clientHeight = offsetHeight - border - scrollBar；
clientLeft & clientTop
没有（左侧/顶部）滚动条时，clientLeft 与 clientTop 等于 border 的宽度，有（左侧/顶部）滚动条时，等于 border 的宽度 + 滚动条的宽度。
特殊情况
当我们在获取<html>元素（document. documentElement）尺寸的时候，client 给出的是 viewport 的尺寸，即浏览器的可视区域尺寸，而 offset 给出的是<html>元素的尺寸，例如：浏览器宽度是 1920px，当修改<html>元素的宽度为 10% 时，document. documentElement.clientWidth 为 1920，document. documentElement.offsetWidth 为 192。
scroll
scrollWidth & scrollHeight
scrollWidth = clientWidth + 溢出内容尺寸；
scrollHeight = clientHeight + 溢出内容尺寸；
scrollTop & scrollLeft
scrollTop：这个元素的顶部到视口可见内容的顶部的距离，当一个元素的内容没有产生垂直方向的滚动条，那么 scrollTop 为 0，scrollLeft 同理。
除了上述的方法外，还有 getComputedStyle 和 getBoundingClientRect 两个方法能获取到详细的尺寸。
Method
getComputedStyle()
getComputedStyle() 获取的是元素 css 定义的属性，css 中是什么就返回什么，举个例子：
#wrapper{ 100px; height:100px; padding:10px; margin:4px; border:1px solid red; } console.log(document.querySelector('#wrapper').getComputedStyle().width)
输出的结果：250px
getBoundingClientRect()
getBoundingClientRect() 获取的是元素的位置信息：left、right、top、bottom 以及 width、height。
返回的 width = offsetWidth，height = offsetHeight。