在我心目中，都是用坐标系来描述这些问题，然而想到要写这一章内容，进行归纳总结的时候发现，说坐标系有点不确切。很多都是单独的坐标轴，即一维问题，每一个维度都是单独考虑，即便涉及两个维度，也可以分开考虑。
然后归纳一下吧，顺便补充某些我们前面没有展开讨论的东西。
文档流
文档流里面主要有三个方向，并没有一定的原点，一般可以认为是所在元素的左上角。或者整个页面的左上角
文本方向
一般指横向中文字排列的方向，和所使用的语言相关，我们常接触的语言都是从左往右，所以初期按着从左往右理解也没什么大问题。
X 轴（横向），一般是从左往右为正方向。但其实是以文字书写方向为正方向
块元素方向
块元素默认的排列方向，是从上往下。这本来挺简单，也符合我们对页面的预期。但是需要注意：页面坐标系中 Y 轴和我们日常见到的二维坐标系是相反的！！！
Y 轴（纵向），朝下才是正方向。
堆叠方向
这是 Z 轴。从电脑屏幕到观看者的方向为正方向。取值越大越叠在上层，也就距离观看者越近，越不容易被挡到。
堆叠反倒最简单，因为在这个方向上，就这一个属性（z-index）负责。
元素周边
四个边要分别说，但这样就很费事，不如我们总结一下它的规则。
外补
以每个方向的边为这个方向的原点，垂直于这个边向外的方向为正方向。
比如 margin-left 就是以元素的左边为原点，向外（更左边）为正方向。
注意：外补可以取负数，这一点很有用。
内补
和外补类似，方向相反（向元素内部为正方向），不能取负数。
边框
这个取决于 box-sizing 属性的取值。也就是我们设定的元素尺寸是否包含了边框。
如果没有包含（content-box，默认值），那么它和外补一样。而外补的起点其实在边框之外。
如果包含边框（border-box），那么它和内补一样。而内补的起点其实在边框之内。
定位
就是和 position 属性相关的位置确定。这是要确定两个点东西，谁（被定位元素）相对于谁（定位基准）进行定位。但这样还不够，因为两个元素都是有面积的，具体到哪一点相对于哪一点，这是要弄清楚的。
好像很复杂的样子呀？还好，也有十分简单的规则：
每个方向都是以被定位元素这个方向的边界和定位基准元素在这个方向上的边界为基准，两边重合为原点，向内（对于两个元素来说都是向元素内部）的方向为正方向。然后都可以取负值。
相对定位（relative）
相对于自己在定位之前的位置进行定位，因为两者面积完全相同，所以原点不重要，主要是确定了方向。
绝对定位（absolute）
相对于祖先元素中第一个不是静态定位（static）的元素进行定位，为了定位方便，一般会把父元素设置为相对定位（relative），但不做偏移，这样就可以相对父元素进行定位了。
固定定位（fixed）
就是相对于浏览器窗口的内边界定位。不过对于滚动条应该进行考虑。
暂无评论内容