最近在学习DOM盒子模型，各种属性看着眼花缭乱，下面根据三个系列来分别介绍一下：
client系列
- clientWidth ：width+(padding-left)+(padding-right)—>和内容溢出无关系
- clientHeight：height+(padding-top)+(padding-bottom)—>和内容溢出无关系
- clientLeft：左边框的宽度
- clientTop：上边框的高度（border[Left/Top]Width）
offset系列
- offsetParent：当前元素的父级参照（父级参照物），在同一个平面中，最外层的元素是里面所有元素的父级参照物（和html层级结构没有必然联系）
a）一般来说一个页面中所有元素的父级参照物都是body
b）body的父级参照物->document.body.offsetParent->null
c）可以通过position：absolute/realative/fixed改变父级参照物
我们可以总结一下规律:
position为fixed元素是没有offsetParent，但firefox统一返回body。
position为absolute, relative的元素的offsetParent总是为其最近的已定位
的元素,没有找最近的td,th元素，再没有找body。
position为static的元素的offsetParent则是先找最近的td,th元素，再没有找body。
body为最顶层的offsetParent。
- offsetWidth/offsetHeight：clientWidth/ clientHeight+左右/上下边框 —>和内容溢出无关系
- offseTop/offsetLeft：当前元素的外边框距离父级参照物内边框的偏移量
scroll系列
- scrollWidth/scrollHeight：和clientWidth／clientHeight一样（前提是：内容无溢出）
若容器内容有溢出：获取结果是如下规则：
scrollWidth：真实内容的宽度（包含溢出）+左填充
scrollHeight：真实内容的高度（包含溢出）+上填充。
- scrollLeft／scrollTop（可读写 ）：滚动条卷曲的宽度和高度
scrollTop有两个临界值，最大值和最小值
滚动最小值：0，dom.scrollTop=一个小于0的数，滚动条也是滚动到顶部
滚动最大值：scrollHeight-clientHeight ,dom.scrollTop=一个大于（scrollHeight-clientHeight）的数，滚动条也是在最底部
通过以上我画了一张图，对照图看顿时你会觉得恍然大悟！请看下图：
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545; min-height: 14.0px }
span.s1 { font: 12.0px ".PingFang SC" }
span.s2 { font: 12.0px "Helvetica Neue" }
span.Apple-tab-span { white-space: pre }
原文地址：https://www.cnblogs.com/imsomnus/p/8677947.html