“危机”两个字，一个意味着危险，另外一个意味着机会，不要放弃任何一次努力！
包看包会，走过路过不要错过
<div id="pp">
<div id="parent">
<div id="box"></div>
</div>
</div>
这是一个盒子套着一个盒子又套着一个盒子，俗称俄罗斯套盒，我们可以把pp看成是parent的父亲，parent又是box的父亲，谁是孙子，谁是爷爷，显而易见。
给祖孙三代添加一些样式
#pp{
height:500px;
width:500px;
margin-top:100px;
margin-left:100px;
background-color: blueviolet;
overflow: hidden;
}
#parent{
height:300px;
width:300px;
margin-top:100px;
margin-left:100px;
background-color: pink;
overflow: hidden;
}
#box{
height:100px;
width:100px;
margin-top:100px;
margin-left:100px;
background-color: aquamarine;
}
呈现出来的效果就这样使儿滴
1.offsetTop:默认元素距离body顶部距离,如果父级(祖先级)元素定位,就是距离最近定位父级(祖先级)元素的顶部距离（此时没设置定位，box的offsetTop就是300）
2.offsetLeft:默认元素距离body左侧部距离，如果父级(祖先级)元素定位,就是距离最近定位父级(祖先级)元素的左侧距离（此时没设置定位，box的offsetLeft就是300）
3.offsetParent：离它最近的定位的祖先级元素(定位)，（如果没有定位，就是body，此时没有定位，是body）
学会了吧，下一位！
是新的代码
<div id="box"></div>
它的样式
*{
margin:0;
padding:0;
}
body{
height:2000px;
}
#box{
height:100px;
width:100px;
margin-top:100px;
margin-left:100px;
padding-top:20px;
border:10px solid red;
overflow: scroll;
}
效果
4.offsetWidth: 水平方向 内容+左右padding+左右border（这里是100+10+10）
5.offsetHeight: 垂直方向 内容+上下padding+上下border（这里是100+20+10+10）
6.clientWidth: 水平方向 内容+左右padding-滚动宽度（如果有）（不同浏览器滚动宽度不同）
6.clientHeight: 垂直方向 内容+上下padding-滚动高度（如果有）
8.clientTop：元素上边框宽度（就是border=10）
9.clientLeft：元素左边框宽度（就是border=10）
裴照，继续！
<div id="box">11111111111</div>
*{
margin:0;
padding:0;
}
body{
height:2000px;
}
#box{
height:100px;
width:100px;
margin-top:100px;
margin-left:100px;
padding-top:20px;
border:10px solid red;
overflow: scroll;
}
10.scrollWidth/scrollHeight 滚动内容如果没有超出盒子,就等于clientWidth/clientHeight 滚动内容如果超出盒子,就是实际内容。此时给box中的内容超出了盒子，欲知实际的scrollWidth多少，请看控制台
继续下一个！
*{
margin:0;
padding:0;
}
body{
height:2000px;
background-image: linear-gradient(blue, red);
}
let html=document.documentElement||document.body;//整个文档
//滚动事件 srcoll window/documet（整个页面）
document.onscroll=function()
{
console.log(html.scrollTop)
}
11.scrollTop 返回文档的滚动top方向的距离（当窗口发生滚动时值改变）
12.scrollLeft 返回文档的滚动left方向的距离（当窗口发生滚动时值改变）
控制台显示的数字，右边那一嘟噜看着没，就是你上下滑动鼠标，生成的scrollTop的值
下一个下一个！
<div id="box"></div>
*{
margin:0;
padding:0;
}
body{
height:2000px;
}
#box{
height:100px;
width:100px;
margin-top:100px;
margin-left:100px;
border:10px solid red;
}
平平无奇的一个小盒子，这个是ES6新增的语法（敲重点）
13.getBoundingClientRect().top 元素上边到视窗上边的距离（此时是100）; 14.getBoundingClientRect().bottom 元素下边到视窗上边的距离（此时是220）; 15.getBoundingClientRect().left 元素左边到视窗左边的距离（此时是100）; 16.getBoundingClientRect().right 元素右边到视窗左边的距离（此时是220）;
以上就是js中盒子模型的几个属性啦，不知客官参透了没有。。。
这里是一盆草莓糖，困死了，本宫洗洗睡了！
