DOM结构：
<body>
<div id="app">
<div class="container">
<div class="container-a">
<div class="content">内容区</div>
</div>
</div>
</div>
</body>
CSS样式：
.container {
display: inline-block;
width: 100%;
height: 100vh;
background-color: #ADD8E6;
}
.container-a {
position: relative;
width: calc(100% - 200px);
margin: 100px;
height: calc(100vh - 200px);
overflow: auto;
box-sizing: border-box;
border: 10px solid red;
background-color: #40E0D0;
}
.content {
height: 150%;
margin: 40px;
padding: 30px;
border: 20px solid;
background-color: #E1FFFF;
background-clip: content-box;
}
浏览器渲染结果：
offsetWidth、offsetHeight、offsetLeft、offsetTop、offsetParent、event.offsetX
offsetWidth
offsetWidth = 内容区width + 左右padding + 左右boder
同理：
offsetHeight = 内容区height + 上下padding + 上下boder
offsetLeft
offsetLeft： 当前元素 左边框外边缘 到 最近的已定位父级（offsetParent） 左边框内边缘 的距离。如果父级都没有定位，则为到body左边的距离。
offsetTop： 当前元素 上边框外边缘 到 最近的已定位父级（offsetParent） 上边框内边缘 的距离。如果父级都没有定位，则分别是到body顶部的距离
offsetParent
已定位的父级元素 例如：
如图，针对
class="content"的元素，假如class="container-a"的元素已定位，则class="content"元素的offsetParent为class="container-a"的元素，假如它的所有父级元素都未定位，则它的offsetParent为body
鼠标事件的offsetX
相对于所点击的元素的左上角(border不计入内)的位置
clientWidth、clientHeight、clientLeft、clientTop、clientX、clientY
clientWidth
clientWidth = width + 左右padding
clientHeigh = height + 上下padding
clientLeft
clientLeft 属性返回元素左边框的宽度（border）。此属性不包括元素的左margin或左padding 。此属性是只读的。
提示：您还可以使用style.borderLeftWidth属性返回元素左边框的宽度。
clientTop 属性返回元素顶部边框的宽度。此属性不包括元素的顶部填充或上边距。此属性是只读的。
提示：您还可以使用style.borderTopWidth属性返回元素顶部边框的宽度。
鼠标事件的位置信息: offsetX、clientX、pageX、screenX
鼠标事件的offsetX
相对于所点击的元素的左上角(border不计入内)的位置
鼠标点击事件的clientX
鼠标点击事件中点击的那个点在浏览器中的坐标
无论是否有滚动条，滚动条的位置是否改变，只要鼠标位置未变，则返回的值不变
鼠标点击事件的pageX
event.pageX 属性返回鼠标指针的位置，相对于文档的左边缘，点击同一个位置，滑轮滚动时，指针的坐标改变
注意： clientX和pageX的区别
pageX = clientX + 横向滚动条滚动的距离
pageY = clientY + 纵向滚动条滚动的距离
clientX是相对于可视化窗口的坐标，即使有滚动条，即使滚动条滚动，在窗口(可视化窗口)相同的位置单击，坐标不变。 pageX的大小是可以根据滚动条的宽而变化，不仅仅是可视化窗口的坐标。
获取滚动条高度的方式：
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
这里使用了三元运算符来检查不同的属性，以确保在各种浏览器环境下都能正常工作。
- window.pageYOffset：返回当前页面滚动条垂直方向已经滚动的像素值，如果页面没有垂直滚动条，则返回0。
- document.documentElement.scrollTop：获取文档对象根元素的scrollTop值，即整个文档的垂直滚动条的位置。在标准模式下，应该使用该属性。
- document.body.scrollTop：获取body元素的scrollTop值，即整个文档的垂直滚动条的位置。在混杂模式下，应该使用该属性。
鼠标点击事件的screenX
当触发事件时，screenX属性返回鼠标指针的水平坐标（根据用户计算机屏幕，而不是浏览器窗口）。
最右边为0，往左为负值
使用screenLeft和screenTop for IE8及更早版本
