第八十七章 坐标系（二）

背景

背景定位其实和前面这些定位很相似，它是背景图片相对于当前元素的定位关系。这里面复杂的是图片上的某个点相对于元素的某个点的偏移，而这两个点在各种情况下是不同的。

基本情况

默认图片左上角和元素左上角对齐。

给出长度，比如 background-position: 50px 80px，就是按着默认坐标系（上面文档流中讲到的默认方向），进行相应的偏移，第一个值是横向，第二个值是纵向。就和我们初中学的坐标系很类似。

关键词

五个关键词，其中是四个方向，表示背景图片这个方向的边和元素这个方向的边对齐。比如 bottom 就是底边对齐。

如果只给出了一个关键词。在另一个方向（交叉方向），则取 center。

center 又是怎样？center 就是 50%。

百分比

这里的百分比就比较复杂，这不只是元素的百分比，也是图片的百分比。

background-position: 50% 50% 是什么效果呢？这会让背景图片在元素中居中。也就是图片的中线点和元素的中心点对齐。那我也可以认为是元素的 50% 和图片 50% 的点对齐（横纵都是）。都是 0% 就是左上角对齐，都是 100% 就是右下角对齐……

所以百分比的意思是：……我不描述了，挺拗口的，写了你们也不看。反正这个百分比同时作用在元素和图片两者之上，具体的最好自己动手验证一下，会比较容易理解。

关键字 + 值

还有一个更复杂的写法：background-position: left 50% bottom 50px。这样就改变了所在轴（横轴或者纵轴）上面的正方向，原点也被指定为了相应的边。

布局方法

率先注意与“流”（flow）相关的属性，这些属性从根本上影响元素的排列方式。

弹性布局

根据主轴和侧轴的设定来确定方向，需要注意的是，横向上的正反与文字书写方向相关，而不是绝对的左右。

对齐中的 start 和 end 也一样，受到文字方向的影响。

网格布局

两个轴固定，和文档流坐标系类似。但是元素排列方向和方法由 grid-auto-flow 属性决定。

---

以上是我们目前为止遇到的方向和起点相关的一些问题的汇总。这些本应该自己总结归纳的，我都帮你们做了，所以大家能不能亲自完成一下相关的练习呢？乖，就当哄小老鼠开心，做一下练习好不好？