手机版秀米
正文字数：3730字
阅读时间：12分钟
本章教程，是上章节的【使用布局，驾驭版式】的下篇，内容元素的重叠规律是怎样的规则，布局的四种宽度属性有何区别，特殊布局特殊在哪里，又能做出什么样的版式，本章会具体讲解。
1.1
更多样式效果
在组件调整栏里，还集结了其他的样式调整选项，包括不透明度、旋转、翻转、倒影、缩放。
步骤①：创建一个两列布局，左右两列各添加一张图片；选择第二列，调整“列定位”左为-30px；点击左侧图片，点击“···”选项，调整不透明度为90%，退出布局模式，观察变化
步骤②：将不透明度重置为100%，调整旋转，退出选中模式，观察变化后重置。
以相同方式观察“翻转”、“倒影”、组件定位中“缩放”、“偏移”的效果
细心的你发现了吗，这些效果都会让他变得气宇轩昂；不过，他好像有点过分喧宾夺主了，原本被遮挡的部分也显山露水起来，貌似他的层次提高了？他们的层叠关系原本是什么，又因为什么而关系破裂？下一节将会详细介绍。
1.2
重叠规律
我们阅读的word、网络上的文章、以大篇幅文字为主的页面，都是以流式排版呈现的；按照阅读顺序从上到下、从左到右，正如手机屏幕通知新消息一样，越后到来的信息总是越醒目，后来居上的信息甚至会一层一层遮盖住旧的信息；我们在阅读的网络文章也是如此，下方的元素总是会遮挡上方的元素，右边的元素遮挡左边的元素；
总而言之，后浪拍打着前浪。这就是他们之间默认的重叠规律。
步骤①：创建一个二列布局，第一列添加适量文字，第二列添加一张图片，并在该二列布局块下方添加一张图片；
调整下方图片的“组前距”为负数，退出选中模式，观察其重叠遮盖情况；调整第二列“列定位”左为负数，退出选中模式，观察整体重叠遮盖情况
上述步骤能够清晰地呈现，结构距离变化引起的重叠是遵循后来居上这个规律的。
但是有时候需要打破这个规律，就比如聊天界面的消息置顶。比如上述步骤中，其实并不希望文字被遮挡，那么为了把文字置顶，就需要给他一些特殊属性。
正如2.2中提到的“不透明度、旋转、翻转、倒影、缩放、偏移”效果，都能够让他提高层级。在上文列定位部分我们也提到，偏移属于位置变换效果而非结构变化，包括旋转、缩放；当然，不透明度、倒影这类影响本身显示效果的属性也能将他们层次提高。
如果置顶的内容太多，那么在顶层的他们也会遵循后来居上的原则。
步骤②：点击文字，设置“偏移”为1，退出选中模式，观察重叠遮盖情况；点击第二列内图片，设置“不透明度”为99%，退出选中模式，观察重叠遮盖情况
正如上述步骤中，想要提高层级，可以巧妙使用这几类效果，比如偏移1、不透明度99%，微小的数值带来了层级改变，但这个效果难以察觉。
综上，结构变化带来的重叠默认为后来居上，增加效果变换可以让他金蝉脱壳般晋升顶层。但是，当他们同处高层，又该怎么调整层叠顺序呢？下一节便会提及。
1.3
布局的各种宽度及其特点
通过前文学习，我们已经会调整布局的宽度，搭建一些常用的多列结构；并且，我们也尝试调整了百分比宽度的布局，他取决于整行的宽度，调整内容时不影响结构和列宽度。
但是这样并不方便我们制作一些束身的样式，比如有边框包围的小标题，如何做到和标题文字的宽度一致呢？那么就需要布局的宽度取决于内容的伸展宽度。
步骤①：创建一个布局，向内添加少量文字，设置其边框样式“样式：实线 ”、“尺寸：1”；
点击宽度单位后方小三角，选择“宽度自适应”，观察效果
若继续往该布局内增删文字，宽度依旧会随之增减，形成一种贴身包裹的结构。此时如果想要他款式更加丰富，例如左侧加入小图装饰，可以向左侧拖入一张图片并吸附，再调整图片列的宽度。
步骤②：调整第一列宽度为10%，退出布局模式，点击编辑页面右下角，将页面宽度更改至200%以模拟网页或Ipad等宽屏幕设备，观察效果；
而后将页面宽度重置为100%，设置第一列宽度为“宽度固定像素”40px，退出布局模式后重复刚才的加宽页面操作，观察效果
当图片列的宽度为相对单位——“百分比”时，图片列会随着各种设备屏幕的宽度而变化，也许在微信公众号网页版查看时，就会出现小装饰喧宾夺主、版式出其不意的状况。因此，装饰小组件可以放置在固定的列宽内。
我们知道，多列的宽度总和超过100%后，或者在调整了一定距离列定位后，布局会发生断行。
步骤③：创建一个三列布局并放入内容，将第二列的左右“列定位”更改为正值，观察效果
列定位会造成相互间的距离变化，当距离增加，宽度便超过了组件边界，产生断行。此时我们可以设想一下，如果有一列像弹簧一样能够自动伸缩，他们似乎就可以不再断裂了。
步骤④：任选一列设置为固定宽度200px；任选另一列设置为“宽度自伸缩”；加宽或缩窄页面，观察效果
你会发现，“宽度自伸缩”确实解决了这个断行的问题，他就像弹簧，撑起了整个剩余空间；为什么说是剩余空间呢，因为第一列固定宽度硬要霸占200px，第三列百分比宽度硬要霸占33%，而剩下了多少，或许我们并不知晓，但是作为弹簧的他很清楚自己的份额。
步骤⑤：创建一个二列布局，将第一列宽度更改为“宽度自伸缩”，伸缩比数值为1；第二列也更改为自伸缩，伸缩比为1，观察效果；
将第一列伸缩比更改为2，在其下方添加一个每列等宽的三列布局，观察效果
如果说同一行出现了多个自伸缩列，那么这一组“伸缩比”数值就彰显力量了；既然是弹簧，那么力量大者多吃多占，这很正常。读取该行所有的自伸缩列的数值，以形成宽度的比例。
上述步骤中，当第一列与第二列均为1时，他们的宽度比例为1:1，表现为平分秋色；当第一列为2，第二列为1时，他们的宽度比例为2:1，与下方的三列等宽布局对比，不难看出各自占用的空间分别为2/3与1/3。
不得不说，自伸缩很好地解决了剩余空间分配的问题；除此之外，设置为自伸缩宽度后，工具条也增加了两个选项。在“垂直对齐”按钮下，多出“拉伸对齐”；在“列定位”按钮下，多出“重叠顺序”。
拉伸对齐
重叠顺序
步骤⑥：向第一列内添加图片与文字，设置对齐方式为“整行拉伸”，观察效果
“拉伸对齐”使得列的高度伸展至黑色线框边界。在1.2节末，我们提出了一个问题，若组件都被设置了效果导致置顶，如何再次更改层级？
我们知道，结构默认重叠为后来居上，当每列内元素层级均因特殊效果提高时，我们可以摒弃结构默认的后来居上原则，自主设置结构的层次；这就是“列定位”按钮下“重叠顺序”的作用。
步骤⑦：创建一个三列布局，宽度均设置为自伸缩，每列均插入图片或文字，将第二列“列定位”左右均设置为负数，观察效果；分别将第一二三列的“列定位”“重叠顺序”设置为2、3、1，观察效果
“重叠顺序”值越大，该列层级越高，越居于上方。这不失为任意调整重叠顺序的好方式。
1.4
更多布局类型
学习完上文，其实我们已经可以通过布局构建各种结构与样式、塑造流式版式了。不过还有一些布局，他们可能不善于创造结构，但是通过调整样式或特有属性，可以当作零件版块去使用。
1.4.1
固定布局
在此之前，我们一直在探讨各种宽度，的确，流式排版的一个特点就是高度不固定，页面内容因宽度的变化可能高度就会变化，虽然一般说来，流式页面中元素高度都是放任不管的状态，但是我们对高度也是可以有要求的。
在模板区“布局”标签下，有一个固定布局，可以同时定义宽度和高度。
步骤①：点击“布局”标签下的“基础布局”，点击“固定布局”，向其中加入文字，设置宽度100px，高度100px，填充为背景图，选择填充方式为“被包含”
固定布局不像多列布局那样可以直接增加列或创造结构，因为只保留了他的外观选项，可以调整宽高、边框、阴影、填充与间距，除了填充，这些都与基础布局无异。
填充方式里，对背景图增加了“被包含”选项，背景图能够被完整地不变形地填入布局框，正因为如此，他更适合用来制作装饰性小零件，比如序号。
除此之外，他还有一个特殊点，在于对溢出内容的显示，如果插入过多的文字或者过长的图片，不会显示超出部分。
固定布局的威力其实不容小觑，搭配边框效果，可以制作出各式各样的小部件，三角、圆、线条甚至图形都不在话下。
打开右侧小眼睛“辅助编辑”按钮，可以查看或选中结构组合，会以蓝色线框标注位置。虽然固定布局内不适宜放入过多内容，但是作为装饰等用途时相当实用。
1.4.2
自由布局
在秀米里有没有更方便的，脱离复杂的流式排版的布局方式，像ppt或者ps一样去实现排版设计呢？
在模板区“布局”标签下的“自由布局”，就支持以拖拽的方式进行画面的排布。
步骤①：点击“布局”标签下的“基础布局”，点击“自由布局”，点击布局调整栏中的“编辑”；点击或框选以选中，拖拽移动位置，拖拉定界框手柄可缩放。
