界面设计：移动表单/单据界面布局 - 快速上手 & 要点介绍

一、概述：

本篇介绍移动表单/单据界面布局的关键知识点，以方便理解和快速上手，主要内容包括：

1. 控件的宽、高、内边距、外边距之间的关系、如何使用？

2. 常用的布局控件有哪些，如何使用？

3. 容器控件如何充满剩余空间（自动充满）？ 

4. 如果定位控件？调整控件顺序？

   
   

二、详情：

2.1 控件的宽、高、内边距、外边距之间的关系、如何使用？

      内边距：指控件内边框到子控件或内容之间的距离；

      外边距：指控件外边框到父控件内边框之间的距离；

      宽    度：左内边距+右内边距+内容/子控件宽度；

      高    度：上内边距+下内边距+内容/子控件高度；

效果如下（为了区分，设置了流式布局的背景色）：

 字段宽度=标题宽度+输入框宽度；

★提示★：计算高宽时，一定要考虑内/外边距，避免被遮挡

2.2. 常用的布局控件有哪些，如何使用？

    布局控件包括：流式布局控件、弹性布局控件

    流式布局控件：解析出来的样式 display:-webkit-box

    弹性布局控件：解析出来的样式 display:flex

以元素从左到右横向显示为例，对比下 流式布局和弹性布局：

效果图如下（为了区分，小方块设置了背景色，放了标签显示数字）：

对比：

相比流式布局，弹性布局多了主副轴相关属性，少