<head>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 500px;
height: 400px;
background: pink;
overflow: scroll;
margin: 30px;
padding: 50px;
border: 10px solid #000;
position: relative;
}
p{
height: 50px;
background: yellow;
}
span{
margin: 30px;
padding: 50px;
background: #000;
display: inline-block;
width: 50px;
height: 50px;
position: absolute;
}
</style>
</head>
<body>
<div>
<span></span>
<!-- <p>111</p>
<p>222</p>
<p>333</p>
<p id="ddd">444</p>
<p>555</p>
<p>666</p>
<p>777</p>
<p>888</p>
<p>999</p> -->
</div>
</body>
<script>
var div = document.getElementsByTagName('div')[0];
var p = document.getElementById('ddd');
console.log(div.clientHeight);height+padding(本身的高度+内边距)--有滚动条时、pc端会自动减去横向滚动条的高度17
console.log(div.clientWidth); width+padding(本身的宽度+内边距)--有滚动条时、pc端会自动减去竖向滚动条的宽度17
console.log(div.offsetHeight);height+padding+border(本身的高度+内边距+边框)
console.log(div.offsetWidth);Width+padding+border(本身的宽度+内边距+边框)
console.log(div.scrollHeight);padding+(所有内容的高度和【包括隐藏的】。即：所有p的高度和)
console.log(div.scrollWidth);padding+(所有内容的宽度和【包括隐藏的】。即：所有p的宽度和)
div.onscroll = function(){
console.log(div.scrollTop);代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度(必须触发滚动事件才生效)
}
console.log(ddd.offsetTop);表示这个子元素距离父元素顶部的距离【此时子元素为第4个】（包括margin+padding+border）
鼠标事件距离
div.onclick = function(e){
var e = window.event || e.ewent;
console.log(e.clientX,e.clientY);点击位置距离当前body（即：浏览器内）区域的X和Y的坐标
console.log(e.pageX,e.pageY);点击位置距离当前body（即：浏览器内[包括横向滚动条隐藏的部分]）区域的X和Y的坐标
console.log(e.screenX,e.screenY);点击位置距离桌面（即：电脑桌面）区域的X和Y的坐标
console.log(e.offsetX,e.offsetY); 点击的位置是相对于带有定位的（父相子绝）父级盒子的X和Y的坐标
}
</script>
</html>
