『组件定位』里面的3个宝藏参数

组前距、组后距、偏移

让大家更好的认识理解一下

在秀米里， 凡是添加到编辑区域的内容，都可以叫做组件。

哪怕是 一张图片、 一个字，都可以算是 组件。

还有一个更好的知道是不是组件的方法： 鼠标点击内容，工具条上会出现『组件定位』。

秀米的系统模板，也是 由一个个单独的内容组件，结合布局，组合而成的结构组件。

当我们在进行排版的时候，会需要去 调整组件之间的距离，比如前后间距。

此时，一般就会需要用到工具条上『组件定位』里面的 『组前距』和『组后距』。

01

组前距

组前距，可以设置一个组件与其前面组件之间的距离。

比如，我们从图库添加一张图片到编辑区域，不加模板的时候，它就是一个纯图片组件：

鼠标点击图片，然后把工具条上『组件定位』里面的 『组前距』设置成： 正数20 （PS：为了让大家看的更清楚才设置这么大数值的），可以发现图片组件与前面的纯文字组件之间的 间距变大了。

如果，我们把 『组前距』的数值设置成： 负数-20，可以发现图片组件与前面纯文字组件之间的 间距变小了。

组前距的数值是可以手动输入的，可正可负，数值越大，间距越大；数值越小，间距越小。

02

组后距

组后距，可以设置 一个组件与其后面组件之间的距离。

比如，我们鼠标点击纯文字组件，在工具条上的『组件定位』里面的 『组后距』设置为： 正数20，会发现文字组件与图片组件之间的 间距变大了。

如果把 『组后距』设置为： 负数-20，会发现文字组件与图片组件之间的 间距变小了。

组后距和组前距是一样的，数值可以手动输入，可正可负，数值越大，间距越大；数值越小，间距越小。

组前距和组后距是用来调整前后组件之间的间距，那想要 调整组件的左右间距，又该怎么做呢？

此时，我们需要用到『组件定位』里面的 『偏移」参数。

03

偏移

组前距和组后距可以理解为垂直方向上调整距离，那么 偏移则可以理解为 水平方向上调整距离。

比如，下方的这个模板，我们想要“白露”小标题稍微往右一点点：

白

露

露凝云散，青天行远雁南归。

春去秋来，山凝白露不改灵动。

浅酌慢饮，看落日映上白露茶盏，岭南的秋日缓缓落入心间。

秋意韵渐浓，山湖美如虹。

桂香竹影，莫负秋光。

就可以选中小标题，设置『组件定位』里面的 『偏移』数值为正数，组件就会 往右挪一定的距离：

此时此刻，如果我们把 『偏移』参数减小，或者是直接设置为负数，组件就会 往左挪一定距离：

对于『偏移』参数来讲，数值可以手动输入，可正可负，数值越大，往右挪的距离越大；数值越小，往左挪的距离越大。

但在调整偏移参数的时候，我们要注意的是： 尽量先靠近，再设置偏移。

就比如，本来小标题是居中的，如下面这个模板：

白

露

露凝云散，青天行远雁南归。

春去秋来，山凝白露不改灵动。

浅酌慢饮，看落日映上白露茶盏，岭南的秋日缓缓落入心间。

秋意韵渐浓，山湖美如虹。

桂香竹影，莫负秋光。

你却想要让小标题往左靠，但是左边又要稍微留出一点点的距离，变成如下这样：

白

露

露凝云散，青天行远雁南归。

春去秋来，山凝白露不改灵动。

浅酌慢饮，看落日映上白露茶盏，岭南的秋日缓缓落入心间。

秋意韵渐浓，山湖美如虹。

桂香竹影，莫负秋光。

我们就 先用『组件定位』里面的 『对齐』让小标题组件 居左对齐，再设置『偏移』参数：

如果 没有先居左对齐，就直接调整『偏移』参数，那么 参数的数值就会很大：

当版式结构过于复杂之后，就很有可能出现各种各样的奇怪现象……😑😑😑

同理，对于前面讲到的『组前距』、『组后距』，调整它们对应的参数数值时，两个组件之间也要尽量先靠近，再去调整数值。

不要两个组件之间还隔着十几二十个空行，就去调参数，那版式不出问题，就真的有鬼了呢……👀

小结

组前距、组后距、偏移这三个参数，主要是用来调整组件的位置。当然，在秀米里，能够用来调整组件位置的参数肯定不止这三个。

不过，用好这三个参数，搞定基础的排版应该是没什么大问题的了。

这三个参数其实和元素重叠也是有关系的，具体的咱们就留到下一期再讲吧哈哈哈哈~这期的字数已经很多了，再讲怕你们不消化…… 然后讲了跟没讲一样……白讲……

更多阅读

小白适用

系统介绍秀米的基础操作

☚☚☚ 向左滑动

秀米有那么多骚技能

不来学几招？

看家本领都教给你们了

确定不给我个一键四连？返回搜狐，查看更多