页面中所有标签都是元素（element）,html标签是根元素，元素可看出是对象
页面中所有内容都是节点（node），所以标签、属性、文本都是节点，而文本包括文字回车换行空格
在DOM对象上有个 properties 属性，offset、client和scroll三大系列都在properties里
offset
DOM对象上有offsetLeft、offsetTop、offsetWidth、offsetHeight和offsetParent五个属性
| offsetWidth |
返回元素的宽度 （content+padding+border） |
| offsetHeight |
返回元素的高度 （content+padding+border） |
| offsetLeft | 返回元素的水平偏移位置 |
| offsetTop | 返回元素的垂直漂移位置 |
| offsetParent | 返回元素的偏移容器 |
标准流中，offsetLeft和offsetTop的偏移是相对于document来说的，也就是距离浏览器窗口左边的距离
<head>
<style>
#box {
width: 100px;
height: 100px;
background: #2c323b;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
var box = document.getElementById('box')
console.log(box.offsetLeft)
</script>
</body>
由于body有默认的margin，所以此时box的offsetLeft为8px
给body设置样式
body {
border:10px solid #3385ff;
padding:30px;
margin:40px;
}
box的offsetLeft变为为80px
标准流时，元素的offsetLeft为：父级margin+border+padding + 自己margin
脱标时父级或祖先级元素没有定位，则元素offsetLeft为：自己的left+margin
若父级或祖先元素有定位，那个元素就是偏移容器（offsetParent），offsetLeft为：偏移容器的border + 自己的left + margin
client
| clientWidth | 返回元素的可见宽度 |
| clientHeight | 返回元素的可见高度 |
| clientLeft | 返回元素左边框宽度 |
| clientTop | 返回元素上边框宽度 |
clientWidth，元素可视区域的宽度，不包括边框
clientX和clientY是鼠标事件处理参数对象里的属性，事件触发时返回鼠标指针在浏览器窗口的坐标
scroll
| scrollWidth | 返回元素内容的宽度 |
| scrollHeight | 返回元素内容的高度 |
| scrollLeft | 返回元素向左卷曲的距离 |
| scrollTop | 返回元素向上卷曲的距离 |
scrollWidth，元素没内容或内容宽度小于元素宽度，则为元素宽度