JS盒子模型

JS盒子模型和CSS盒子模型类似，也是描述当前盒子的尺寸

一共有四大系列共13个

• client获取当前盒子可视区域的宽高，不包含border
  • clientWhith clientHeight clientLeft clientTop
• offset
  • offsetWhith offsetHeight offsetLeft offsetTop offsetParent
• scroll
  • scrollTop scrollLeft scrollWidth scrollHeight

具体解释

client

1、获取的值，是整数
2、是向上取整的整数（比如20.2，显示21）
clientWidth：当前盒子可视区域的宽度（width+左右的padding）
clientHeight：当前盒子可视区域的高度（height+左右的padding）
clientLeft：当前盒子的左边框的宽度（border-left）
clientTop：当前盒子的上边框的宽度（boder-top）

offset

offsetWidth：获取当前盒子的总宽度（width+左右的padding+左右border、clientWidth+左右border）
offsetHeight：获取当前盒子的总高度（height+上下的padding+上下border、clientHeight+上下border）
offsetLeft：当前盒子距离父级参照物的左偏移量（当前盒子的外边框距离父级参照物的内填充的距离，含margin，但不含border）
offsetTop：当前盒子距离父级参照物的上偏移量（当前盒子的外边框距离父级参照物的内填充的距离，含margin，但不含border）
offsetParent：当前盒子的父级参照物

scroll

scrollHeight：获取当前元素的真实的高度（如果当前盒子的内容没有溢出，那就和clientHeight相等，如果溢出了，那就等于上下padding+溢出内容的真实高度）[如果当前盒子设置了overflow:hidden，那么scrollHeight就等于上下padding+溢出内容的真实高度]
scrollWidth：获取当前元素的真实的宽度（如果当前盒子的内容没有溢出，那就和clientWidth相等，如果溢出了，那就等于左右padding+溢出内容的真实宽度）[如果当前盒子设置了overflow:hidden，那么scrollWidth就等于左右padding+溢出内容的真实宽度]