javascript三大家族系列

三大家族
offset
1.作用
获取元素 自身 真实的宽高与位置
2.语法
offsetWidth/offsetHeight
获取元素真实的宽高 （width+padding+border）
offsetParent
获取元素最近的定位父级
a. 元素是固定定位fixed，定位父级是null
b 元素是非固定定位（绝对与相对），所有的父元素都没有定位，定位父级是body
c. body的定位父级是null
offsetLeft/offsetTop
获取元素真实的位置 ： 元素 左/上 外边框 到 定位父级 左/上内边框的距离

scroll
	1.作用
		获取元素   内容  的宽高与位置
	2.语法
		scrollWidth/scrollHeight
			获取元素 内容的 宽高
		scrollLeft/scrollTop
			获取元素 内容的 位置 ： 左/上 滚动的距离
	3.应用场景
		固定导航
			a. 给页面注册滚动条事件 ： window.onscroll
			b。 获取页面滚动的距离 ： document.documentElement.scrollLeft / Top
	
client
	1.作用
		获取元素   可视区域  的宽高与位置
	2.语法
		clientWidth/clientHeight
			获取元素 可视区域的 宽高
		clientLeft/clientTop
			获取元素 左/上边框宽度 ： border-left 与 border-top
	3.应用场景
		响应式布局
			a. 给页面注册大小变化事件 ： window.onresize
			b。 获取页面可视区域大小 ： document.documentElement.clientWidth / Height
	
三大家族特点
	a. 可以获取行内，也可以获取行外
	b. 获取的类型是number，不带单位
	c. 只能获取，不能设置``