1找爱、盒子模型
所謂CSS盒子模型是：
margin + border + padding + content
舉例說明：
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
padding: 20px;
margin: 20px;
border: 2px solid red;
}
.boxItem{
width: 100%;
height: 100%;
background: green;
}
</style>
<div class="box">
<div class="boxItem"></div>
</div>
如圖所示：
可視區(qū)域高度： clientHeight = height + padding = 240;
正文全文高度：scrollHeight = height + padding = 240;
可見區(qū)域偏移高度：offsetHeight = height + padding + border = 244;
此時 scrollHeight 和 clientHeight 好像看起來并沒有什么區(qū)別。
如果我們上面的代碼做以下修改：
.box{
width: 200px;
height: 200px;
padding: 20px;
margin: 20px;
border: 2px solid red;
overflow:auto;
}
.boxItem{
width: 100%;
height: 1000px;
background: green;
}
可視區(qū)域高度： clientHeight = height + padding = 240;
正文全文高度：scrollHeight = height + padding = 1040;
可見區(qū)域偏移高度：offsetHeight = height + padding + border = 244;
這下就可以看到之間的區(qū)別了吮播，其他計算屬性如下：
clientLeft: 2;
clinetTop: 2;
offsetLeft: 20;
offsetTop: 20;
scrollLeft:0;
scrollTop:0;
總結(jié)：
當前div.box元素的稱為當前元素意狠，當前元素的offsetParent（父類節(jié)點）在這里是 body环戈；
Client
clientleft:元素的內(nèi)邊距的外邊緣和元素邊框的外邊緣的距離澎灸，實際就是邊框的左邊框?qū)挾?/p>
clienttop:同理邊框的上邊框的寬度
clientwidth:用于描述元素內(nèi)尺寸寬度，是指元素內(nèi)容+內(nèi)邊距大小拦止，不包括邊框汹族、外邊距括蝠、滾動條部分
clientheight:同理 用于描述元素內(nèi)尺寸高度，是指元素內(nèi)容+內(nèi)邊距大小搁拙，不包括邊框法绵、外邊距、滾動條部分
Offset
offsetleft: 元素的邊框的外邊緣距離與已定位的父容器（offsetparent）的左邊距離（不包括元素的邊框和父容器的邊框）盐茎。
offsettop:同理是指元素的邊框的外邊緣距離與已定位的父容器（offsetparent）的上邊距離（不包括元素的邊框和父容器的邊框）字柠。
offsetwidth:描述元素外尺寸寬度探越，是指 元素內(nèi)容寬度+內(nèi)邊距寬度(左右兩個)+邊框(左右兩個)钦幔，不包括外邊距和滾動條部分。
offsetheight:同理 描述元素外尺寸高度鲤氢，是指 元素內(nèi)容高度+內(nèi)邊距高度(上下兩個)+邊框(上下兩個)卷玉，不包括外邊距和滾動條部分
