图文排版
H5
手机版秀饭
正文:3730字
阅读时间:12分钟
本章教程是上一章“使用布局，控制布局”的下一部分。本章将具体讲解内容元素重叠的规则，布局的四种宽度属性的区别，特殊布局的特殊之处以及可以做什么样的布局。
1.1
更多风格效果
在组件调整栏中，还有其他样式调整选项，包括不透明度、旋转、翻转、倒影和缩放。
步骤①: 创建两栏布局，左右栏各添加一张图片；选择第二列，将列定位左侧调整为-30px；点击左边的图片，点击“……”选项，不透明度调整为90%，退出布局模式，观察变化
步骤②: 将不透明度重置为100%，调整旋转，退出所选模式，观察变化后重置。
以同样的方式观察组件定位中“翻转”、“反射”、“缩放”和“偏移”的效果
你有没有仔细注意到，这些影响会使他威风凛凛；不过他好像有点放肆，原本被屏蔽的部分也很明显。好像他的水平提高了？他们原本是什么级联关系，为什么会破裂？下一节将详细介绍。
1.2
重叠规则
我们读到的字，网上的文章，大文字的页面，都是流式排版呈现的。按照阅读顺序，从上到下，从左到右，就像手机屏幕通知新消息一样，后面的消息总是更吸引眼球，后面的消息甚至一层一层地覆盖旧消息；我们正在阅读的网络文章也是如此。下面的元素总是阻塞上面的元素，右边的元素阻塞左边的元素。
一句话，后浪打前浪。这是它们之间的默认重叠规则。
步骤①: 创建两栏布局，第一栏添加适当的文字，第二栏添加图片，两栏布局块下方添加图片；
将下图的“组前距离”调整为负值，退出所选模式，观察重叠和覆盖情况；将第二列的左侧列定位调整为负，退出所选模式，观察整体重叠覆盖情况
以上步骤可以清楚的看出结构距离变化引起的重叠遵循的规律。
但有时候需要打破这个规则，比如聊天界面的消息置顶。比如上面的步骤，其实你并不希望文字被屏蔽，所以为了把文字放在最上面，你需要给他一些特殊的属性。
2.2中提到的“不透明、旋转、翻转、倒影、缩放、偏移”的效果可以让他提高水平。在上面的列定位部分，我们也提到了 offset属于位置变换效果而不是结构变化，包括旋转和缩放；当然，不透明、反光等影响自身显示效果的属性也可以提升自己的等级。
如果上面的内容太多，那么上面的人就会遵循从后面来的原则。
步骤②: 点击文字，设置“偏移”为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，不需要流排版的复杂布局？
在模板区的“布局”标签下，“自由布局”支持图片的拖拽式布局。
步骤①: 点击布局选项卡下的基本布局，点击自由布局，点击布局调整栏中的编辑；或者单击“方框选择”进行选择，拖动以移动位置，拖动边框手柄进行缩放。
向自由布局添加内容
调整元素的层次关系，预览
回到图形编辑界面
如果有现成的ps文件，可以点击下面的“导入psd”按钮导入所有图层。
点按蓝色虚线外的白色区域或右齿轮按钮来设定帧比例。
如果你使用过休米H5，这个界面是熟悉的。进入这个界面后，虽然页面发生了变化，但是剪贴板的内容保持不变。
此外，自由布局还可以设置动画效果，最终以帧的形式呈现。
1.4.3
表格布局
本节主要介绍表格的快速创建和样式调整。表格的样式设置类似于前面的基本布局操作。
创建时，可以选择“导入word/excel”按钮快速导入已有的表格，也可以通过以下步骤在休米中快速创建。
第一步:选择“基本布局”下的“表格”，放入编辑区，选择任意单元格，点击“快速创建表格”，输入行数和列数，键入内容。
表格的宽度可调整为百分比，可以点击
表格的宽度可以调整到一个百分比，您可以单击
第二步:设置第一个单元格的样式，点击“向右应用格式”观察效果；点击“隔行向下应用”观察效果；点击“逐行向下应用”观察效果。
由于表格中所有行和列的样式都比较统一，所以只需要在关键起始位置设置单元格样式，然后将样式应用到右侧或下方的整行，就可以快速完成。
第三步:点击表格任意单元格，点击“转换表格”，在左侧模板区、剪贴板或收藏栏中选择一种表格样式。
如果模板本身包含页眉样式，则直接应用。如果不需要，可以在应用后更改，也可以制作自己的样式模板，放在收藏栏或剪贴板中进行后续格式化。
1.4.4
其他特殊布局
在“标题”标签下的“基本标题”中，有一个初始的“下沉”布局，可以达到文字环绕的效果。可以打开布局模式自行探索。
此外，svg布局和滑动布局将在下一节关于交互的内容中解释。
1.5
冻结
顾名思义，“冷冻”后的版面可塑性更差，需要“解冻”来调整具体的结构或风格；相应的调整选项被隐藏，仅显示通用组件调整栏，但不影响副本的修改。
“冻结”功能明显，调整栏更加简洁清爽，编辑模式下不会误改样式结构；冻结的图片会被标记为装饰组件而非图片，在“一键排版”或“改变组件”时不会应用图片样式。
一点六
本章摘要
排版是技能，休米是排版工具，技能加工具必不可少。所以，想要高级的米布局，还是继续了解米布局吧。
重叠规则元素的重叠遵循从后面来的规则，增加偏移、透明和旋转的效果可以改变层次关系。另外，多栏布局的列定位“重叠顺序”可以独立设置结构层次。
布局的宽度自适应属性取决于内容的宽度。固定宽度属性，可以固定，不会因设备屏幕的宽度而改变。宽度自膨胀属性就像弹簧一样，会自动膨胀和收缩其比例。
特殊布局类型固定布局，可定制宽度和高度。自由布局，像PPT一样，可以选择、拖动、拖拽、缩放边框来设计布局。还有用于导入和创建表格的表格布局、初始拖放布局等等。
不是所有的专业都一样。
工作结束时必须有一个休米。
