浏览器中的坐标系
了解浏览器坐标系对于我们操作事件中的元素位置， DOM元素，熟练计算两个元素之间的偏移量，以及绘画 canvas都有着很大的帮助，今天就让我们一起学习以下坐标系是如何在浏览器中被使用的。
前言 TL；DR
在开始浏览器渲染流水线中，Layout的阶段是用来计算已经有着样式的 render tree元素的位置以及几何属性，当这个阶段后，CSSOM中则有了关于一个元素的位置信息，并且将这些信息通过接口的形式暴露出来，让用户可以使用JS代码获取以及计算。这其中有四个比较常见的坐标系类型，而了解了这四个坐标系和其中的计算方式，我们就可以掌握浏览器中的坐标系统而有助于我们计算想得到的位置信息。
浏览器中的坐标系简介
在浏览器中，对一个位置/点的表述通常是相对一个固定的点，而这个固定的点被称为 origin/原点， 而我们计算的位置通常是与原点的像素偏移量而计算出来的。
浏览器的初始点通常为左上角的位置 (0, 0)：
- 水平方向为 x 轴：
- 原点的右边为正数
- 原点的左边为负数
- 垂直方向为y轴：
- 正数为原点下方
- 负数为原点上方
在CSS中有 z-index这个属性，其代表为 z轴，z轴通常是从观察者角度到屏幕表面，我们可以修改z轴的值来产生远近的效果。
4大类型坐标系
通过以上这些知识，当我们研发时，已经可以建立起一个简单的坐标系，来获取DOM元素的位置信息；而 CSSOM 则使用了不同的坐标系来简化我们对一个元素的位置获取时的计算。例如在鼠标移动事件时，e 事件对象中给出了 offsetX, offetY, clientX, clientY..., 那么这些 (X, Y)都代表着什么意思呢？接下来就让我们来学习一下：
- Offset：
offset的坐标系使用当前元素 (例如，e.target) 的左上角作为原点，而(offsetX, offsetY)则代表了与元素的当前位置在当前元素的坐标系中的(x, y)。这里面需要注意的是，原点是由padding-top & padding-left来指定的，如果在border范围内得到的offsetX & offsetY那么可能掺杂着负值。 - Client
Client的坐标系使用了visual viewport的左上角作为原点，如果有滚动区域，clientX & clientY也是以可见区域的左上角作为原点，来得到当前鼠标距离原点的偏移量的。这里需要注意的是，在事件中的clientY并不包含全部滚动的区域。 - Page
Page坐标系的原点则是
document文档中的左上角。 在事件对象中的pageX && pageY， 则表示了距离该点的偏移量。通常我们需要包含滚动区域时，可以使用pageX & pageY。 - Screen
Screen 坐标系则是以用户屏幕的左上角为原点， 在事件中的
screenX & screenY则是针对于用户屏幕的偏移量。比如在笔记本电脑的屏幕与更大的外界屏幕上，screenX & screenY的值则是有很大不同的
总结
希望通过这篇文章，大家能够对浏览器不同的坐标系有了大致的了解, 不仅仅在事件中可以以上坐标系来了解目标点所在位置信息，DOM元素中的property （例如, offsetTop & offsetLeft则是针对 offsetParent的偏移量)也可以通过以上坐标系来更好的理解相关的位置信息。希望以上内容对你接下来在项目有帮助，并能运用起来做出更炫酷的效果
