注：内边距、外边距、边距的关系 juejin.cn/post/741295…
offset家族
偏移量(offset dimension)是javascript中的一个重要的概念。涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性。
当然，还有一个偏移参照————定位父级offsetParent。
offsetWidth、offsetHeight包含边距和内边距
offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width
offsetHeight = border-top-width + padding-top + height + padding-bottom + border-bottom-width
client
client是javascript中的一个重要的概念。涉及到偏移量的主要是clientLeft、clientTop、clientWidth、clientHeight这四个属性。
[定位父级]
在理解偏移大小之前，首先要理解offsetParent。人们并没有把offsetParent翻译为
偏移父级
，而是翻译成定位父级，很大原因是offsetParent与定位有关
定位父级offsetParent的定义是：与当前元素最近的经过定位的父级元素，主要分为下列几种情况
1.元素自身有fixed定位，offsetParent的结果为null
当元素自身有固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent的结果为null
firefox浏览器有兼容性问题
<div id="test" style="position:fixed"></div>
<script>
var test = document.getElementById('test');
//firefox并没有考虑固定定位的问题，返回<body>，其他浏览器都返回null
console.log(test.offsetParent);
</script>
2.元素自身无fixed定位，且父元素都没有设置定位，offsetParent的结果为body
<div id="test"></div>
<script>
var test = document.getElementById('test');
console.log(test.offsetParent);//<body>
</script>
3.元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素
<div id="grandfather" style="position: relative;">
<div id="father" >
<div id="test"></div>
</div>
</div>
<script type="text/javascript">
var test = document.getElementById('test');
// 距离该子元素最近的进行过定位的父元素,如果其父元素不存在定位则offsetParent为:body元素;
console.log(test.offsetParent);
</script>
4.<body>元素的offsetParent是null
console.log(document.body.offsetParent);//null
clientWidth = padding-left + width + padding-right
clientHeight = padding-top + height + padding-bottom
clientLeft和clientTop：返回的是元素边框的 borderWidth，如果不指定一个边框或者不定位改元素，其值就为0
scroll
scroll(滚动)是javascript中的一个重要的概念。涉及到偏移量的主要是scrollLeft、scrollTop、scrollWidth、scrollHeight这四个属性。
当盒子内容超出盒子之后就会出现滚动条，这时候的
scrollHeight滚动高度=内容的高度
scrollWidth滚动的宽度=内容的宽度
scrollLeft、scrollTop = 滚动出去的部分
