JS操作盒子模型--client系列,offset系列,scroll系列

JS盒子操作模型，需要知道的13大api

client系列
offset系列
scroll系列
接下来，我们来深度了解一下，这些API

client系列

1.clientWidth： 获取box的内容区域width+左右padding（可视区域width的大小）
**2.clientHeight:**获取box的内容区域height+上下padding（可视区域height的大小）
3.clientTop: 获取盒子的上边框的大小
4.clientLeft: 获取盒子的左边框的大小

下面是一些问答，有助于更好地理解概念

问：我要获取当前页面一屏的宽度（可视区） 
答：1）document.body.clientWidth
  	2)document.documentElement.clientWidth
问：我要获取当前页面一屏的高度（可视区）
答：1）document.body.clientHeight
  	2)document.documentElement.clientHeight

注意：
1）clientWidth,clientHeight,clientTop,clientLeft只能获取值，不能设置值
2）获取的值，是一个数字，并没有单位
3）获取的值是一个整数，不是小数，即使是小数，获取时，也给转化成整数
4）client系列不官你的内容是否溢出，得到盒子的可视区域

offset系列

5.offsetWidth: box.offsetWidth 在clientWidth的基础上加了border
6.offsetHeight: box.offsetHeight 在clientHeight的基础上加了border
7.offsetTop: 获取一个绝对定位元素相对于参考点上面的距离
8.offsetLeft: 获取一个绝对定位元素相对于参考点左面的距离
9.offsetParent(xxx): 获取一个绝对定位元素的参考点

scroll系列:

10.scrollWidth: 在没有内容溢出的情况下：scrollWidth = clientWidth
在内容溢出的情况下：scrollWidth的值约等于真实内容的宽度，不同浏览器中得到的值可能不一样
overflow属性会影响scrollWidth。
只能获取值，不能设置值
11.scrollHeight: 在没有内容溢出的情况下：scrollHeight = clientHeight
在内容溢出的情况下：scrollHeight的值约等于真实内容的高度，不同浏览器中得到的值可能不一样
overflow属性会影响scrollHeight。
只能获取值，不能设置值
12.scrollTop: 获取垂直滚动条滚动的距离（获取垂直滚动条卷去的高度）
特殊：不只可以获取，也可以设置（可读可写） 重要
13.scrollLeft: 特殊：不只可以获取，也可以设置（可读可写）
获取水平滚动条滚动的距离（获取水平滚动条卷去的距离） 基本上用不到
没有什么卵用
问答区域

问：我要获取当前页面真实内容的高度。
  答：1）document.body.scrollHeight   2）document.documentElement.scrollHeight

问：我要获取当前页面卷上去高度。
答：1）document.body.scrollTop   2）document.documentElement.scrollTop

问：一张网页卷上去最大高度是多少？
答：scrollHeight - clientHeight
获取一张网页可视区的高度： document.body.clientHeight
获取一张网页真实的高度： document.body.scrollHeight
获取一张网页卷去的高度： document.body.scrollTop