clientWidth，offsetWidth，scrollWidth的关系

DOM对象的各种尺寸一直有点模棱两可，查询资料笔记之。

###size

1. clientWidth: DOM对象宽度，包含padding，不包含border
2. offsetWidth: DOM对象宽度，包含padding,border
3. scrollWidth: DOM对象宽度，包含滚动条隐藏内容的宽度(如果有滚动条)
4. document.body.clientWidth: 页面可视区域宽度，不含滚动条隐藏内容的宽度 (chrome中和document.documentElement.clientWidth)
5. window.innerWidth: 页面内容可视区域宽度+滚动条宽度
6. window.screen.width: 屏幕分辨率宽度，不受浏览器窗口影响
7. window.screen.availWidth: 浏览器最大可用宽度，类似window.screen.width，但mac下取决于侧边栏是否有Dock

###distance

1. clientLeft: DOM对象内容（含padding）区域到边框区域左起点的距离，即左边框宽度
2. offsetLeft: DOM对象左起点到body左边缘(不含border)的距离 // 貌似不对 in chrome
3. scrollLeft: DOM对象被滚动条卷去的宽度 window.pageYOffset

###position of DOM element

1. 相对位置（相对于viewport): el.getBoundingClientRect().top
2. 绝对位置: 相对位置 + 滚动条卷去的距离(d.b.scrollTop)