1、HTML结构
html.png
2、div#div元素的margin
div.#div.png
3、div.outer元素的盒模型
div.outer.png
3、body元素的盒模型
body.png
4、result
result.png
5、//总结上面的规律，你会发现：
//元素A的offsetHeight/offsetWidth计算的是元素A的border属性以内（包括元素A的border值）的值；
//元素A的offsetTop/offsetLeft计算的是元素A的border属性以外（不包括元素A的border值）的值；
6、```var dom = document.querySelector("#div")
dom.offsetHeight
102
dom.offsetWidth
102
//offsetWidth = contentWidth + border;
//offsetHeight = contentHeight + border;
dom.offsetTop
31
dom.offsetLeft
39
//offsetTop、offsetLeft是基于border属性计算的，也就是要牵涉到offsetParent;
//offsetParent元素是非static定位的父元素；```
//由于div.outer其定位属性值不是relative/absolute/fixed当中的一种，所以div#div的offsetParent就是body元素。
//因此，div#div的offsetLeft =
//div#div的margin(10px) +
//div.outer的padding(10px) +
//div.outer的border(1px) +
//div.outer的margin(10px) +
//body的margin(默认是8px) = 39px;
7、当设置body的margin-top为100px
setbody.png
8、当设置html的margin-top为100px
sethtml.png
9、输出html元素与body元素的
getBoundingClientRect()值
getBoundingClientRect.png
10、获取可视区域的clientWidth/clientHeight
client.png
