DOM盒子模型

浏览器提供一些获取页面中的盒子位置和样式宽高信息的属性和方法，获取的结果是没有单位的数字number类型且获取的结果是整数，它会自己进行四舍五入。

CSS盒子模型

元素内容的宽度和高度：我们设置的width/height这两个样式就是内容的宽和高；如果没有设置height，容器的高度会根据里面内容自己进行适应，这样获取的值就是真实内容的高；如果设置固定高度，不管内容是多了还是少了，其实我们的内容高度指的都是设定的那个值；

元素真实内容的宽和高：这个指的是实际内容的宽高（和我们设置的width和height没有必然的联系），如果内容有溢出，那么真实的内容高度是要把溢出的内容也要加进来的。

client系列

元素.clientWidth：元素内容的宽度+左右内边距;

元素.clientHeight：元素内容的高度+上下内边距；内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，不包含水平滚动条,与页面内容无关

clientWidth和clientHeight与内容溢出没关系

元素.clientTop：上边框线的宽度，元素上边框的宽度，当没有指定边框宽度时，一般为0。

元素.clientLeft：左边框线的宽度，元素左边框的宽度

offset系列

元素.offsetWidth：元素内容的宽度+左右内边距+左右边框（border）

元素.offsetHeight：元素内容的高度+上下内边距+上下边框,包含了水平滚动条的高度

offsetWidth和offsetHeight与内容溢出没关系

元素.offsetParent:当前元素的父级参照物，返回最近的定位父级元素，如没有，返回body元素，

document.body.offsetParent === null;(body的父级参照物为null)

利用这个可以封装一个任何元素求相对于文档中body的坐标，只有body的上一级定位元素对象为空才会结束while循环。

Object.prototype.offset = function() {
	let parent1 = this.offsetParent; //获取上一级定位元素对象
	let x=this.offsetLeft;
	let y=this.offsetTop;
	while (parent1 != null) {
		x += parent1.offsetLeft;
		y += parent1.offsetTop;
		parent1 = parent1.offsetParent;
	}
	return {x,y};
};

元素.offsetTop：相对第一个（最近的）父级参照物有定位属性的上偏移量；获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。

元素.offsetLeft：相对有定位属性的父级参照物左偏移量；

元素.offsetTop和元素.offsetLeft是当前元素的外边框到父参照物的里边框的距离

父参照物和HTML层级结构中的父元素没有必然的联系

父参照物查找：同一个平面中，最外层元素是所有后代元素的父参照物，一般来说元素的父级参照物在默认情况下都是body。

基于有定位的position：relative / absolute / fixed 可以让元素脱离文档流（一个新的平面），从而改变元素的父参照物。

如果给一个元素增加position属性(absolute，relative、fixed)，会让他所有子孙元素的父级参照物都指向当前这个元素

scroll 系列

元素.scrollWidth：盒子的实际宽度(包括滚动条不可见部分，不包括边框线)

在没有内容溢出的情况下，获取的结果和 client 是一样的

在有内容溢出的情况下，获取的结果约等于真实内容的宽高（左/上padding + 真实内容的宽度/高度）

设置 overflow 属性值对最后的结果会产生一定的影响

元素.scrollHeight：盒子的实际高度(包括滚动条不可见部分，不包括边线)

获取整个页面真实的高度

document.documentElement.scrollHeight以及document.body.scrollHeight

元素.scrollTop：滚动条向下滚动的距离；位于对象最顶端和窗口中可见内容的最顶端之间的距离，简单地说就是滚动后被隐藏的高度。

元素.scrollLeft：滚动条向右滚动的距离；

边界值：

min = 0

max =（整个的高度scrollHeight） - （一屏幕高度clientHeight）

利用边界值：

快速定位到顶部：元素.scrollTop=0;

快速定位到底部：元素.scrollTop = 元素.scrollHeight - 元素.clientHeight

13个盒子模型属性，只有scrollTop和scrollLeft是“可读写”的属性（既可以获取也可以设置对应的值），其余的都是“只读”属性（不能设置值，只能获取）

盒子模型图解

鼠标事件对象的clientX/offsetX和盒子模型clientWidth/offsetWidth的区别

clientX/clientY的位置是鼠标相对于整个视口的左上角的位置

offsetX/offsetY的位置是鼠标相对于事件源（即鼠标所停留在的那个节点）的左上角的位置

clientWidth/clientHeight的尺寸是节点不包含border宽度和margin的尺寸，不论是什么盒模型都不包含

offsetWidth/offsetHeight 的尺寸是节点不包含margin的尺寸