如何获取元素宽高，以及 offset / client / scroll 等属性梳理

盒模型宽高

• dom.style.width/height (只适用获取内联元素的宽和高，不合法值，取出来是空字符)
• dom.currentStyle.width/height (获取渲染后的宽高，但是仅IE支持)
• window.getComputedStyle(dom).width/height (与2原理相似，但是兼容性，通用性会更好一些) (始终是content,即使border-box)(渲染后的样式, 包括继承的样式)
• dom.getBoundingClientRect().widht/height (计算元素绝对位置，获取到四个元素left,top,width,height)(始终是content,即使border-box)(scrollIntoView滚动至可视区域)

offset

• offsetWidth / offsetHeight
  只读， 包含 content， padding， border，滚动条的宽度/高度
• offsetTop / offsetLeft
  只读， 相对于其 offsetParent 元素的顶部/左侧的距离 ， offsetParent为最近的非static父元素或最近的 table, table cell 或根元素

client

• clientWidth / clientHeight
  只读， 包含 content， padding
• clientTop / clientLeft
  只读， 上/左边框的宽度
• clientX / clientY
  事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平/垂直坐标

scroll

• scrollWidth / scrollHeight
  只读， 表示元素内容的宽度/高度，包括由于滚动而未显示在屏幕中内容 （即整个滚动内容宽高）
• scrollTop / scrollLeft
  读写， 元素的顶部/左侧到视口可见内容（的顶部/左侧）的距离