背景

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

基本情况

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

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

关键词

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

如果只给出了一个关键词。在另一个方向(交叉方向),则取 center

center 又是怎样?center 就是 50%

百分比

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

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

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

关键字 + 值

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

布局方法

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

弹性布局

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

对齐中的 startend 也一样,受到文字方向的影响。

网格布局

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


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

【本章助记卡片:卡片 for 第八十七章