MisShop开发设计管理系统，系统一般都在PC上运行。大部分页面用列表模板就够了，需要用到布局的不是特别多，但也离不开。如果开发移动端页面，则处处离不开页面布局。

下面简要介绍布局的基本知识。

我们在设计布局的时候，要遵从自顶向下的理念，什么意思呢？就是根据功能或美观划分，把一整个页面划分成几个子区域，然后每个子区域根据各自的特点，继续划分成不同的子区域。各个子区域的布局都不同。

布局一般有弹性布局，表格布局，网格布局，流式布局，div布局等（在MisShop设计器中选择区域>设为区域>控件类型>布局 中设置）。

弹性布局，布局中每个元素的高度都一样，都算一行。宽度用户自己设定，设定好了以后，内容再大也要往这个宽度里塞。如一个按钮，设置为宽度3栏，但按钮上的字有十几个，那就只能显示出来一部分，剩下的显示不出来了。

需要注意的是，选择弹性布局的区域>样式配置>布局>宽度>3/12，这个设置中的宽度1/12，6/12，宽度占满等，是指这个区域宽度占其父区域宽度的多少，默认按总宽度12等分。

选择弹性布局区域中的某一个单元格>样式配置>弹性容器元素>宽度>2栏，8栏，平分，这个表示这个单元格宽度占弹性布局区域宽度的24分之几。这里的区域默认分为24栏。平分表示如这个区域共4个单元格，一个单元格占2栏，一个单元格占4栏，剩下两个都设置为平分，则剩下两个平分剩下的分栏数，即每个占9栏[(24-2-4)/2]。

网格布局可以认为是多行的弹性布局，每一行都有自己的布局，上下不对齐。不像表格布局，上下是对齐的，行列分明。网格布局不能上下合并，如果网格布局中有单元格上下合并，这一格并不会跨行显示，这个需要注意。适合实现九宫格控件等应用，背景一致。网格布局中的每一个单元格都可以设置自己的分栏宽度。网格区域整体也可以设置占父区域的宽度比例。

流式布局，不是按行来的，没有行高的概念，控件多高显示多高。不像弹性布局的每个单元格行高都是一样的。

流式布局默认没有包裹层，也就是没有边框，没有内边距，只能用外边距控制与其他格的距离。此时外边距不是从子元素的边框起算，而是从内容起算。如果子元素是默认的字符串，未设置外边距，则所有格的字符串会挤到一起去。不像弹性布局，就算不设置外边距，每个单元格都有个默认的大小。

div布局，每一个格的大小都要自己设置，适合简单的布局。如手机中每个app的图标和app名称可以设置为一个div区域，因为图标和名称不等高，不能用弹性区域。其中元素的显示方式可以设置为"行内块"，行内块就可以设置高度，如设置成100%，则表示这个块的高度跟父区域一样高。"块"的前后都会自动换行，这个需要注意。

表格区域可以看成是特殊的网格区域，其行列必须对齐。可以跨行合并，跨列合并。适用于显示很多列的数据。因此不适合用在手机页面中，手机中每行超过三列就不太美观了。表格的首行一般认为是标题行，在字体、显示样式上会做一些特殊的处理。

根据前端设计Box的模型，页面上每个单元格都有content/padding/border/margin四种空间，由内而外，对应设置项中分别叫内容/内边距/边框/外边距。边框的范围对应包裹层。我们在调整单元格间距离的时候，一般主要修改内边距，因为不对其他单元格产生影响。页面边缘的单元格使用外边距时，容易让页面在窗口中浮动，在手机中会表现为页面不是满的，左右可以拖动。

因为区域是一层套一层的，外层区域的内边距和内层区域的外边距会接触，共同完成布局。

网格布局，布局图片时，中心点都是一样高的，水平对齐，图片大小不等也能比较美观。

弹性布局默认是换行的，一行显示不小就显示到第二行。网格布局默认是不换行的，显示不下会往页面外挤。

弹性、流式布局都可以设置主轴方向，从上往下布局。也可以设置往上换行，一行显示不下往上一行显示。

其他说明

等高用弹性，不等宽不等高用流式，等宽等高用格式。
不能用弹性布局的地方肯定不能用网格布局。
设置为弹性块的div就是弹性布局。
显示溢出，例如一个单元格里的字有一大段，溢出了怎么显示，隐藏还是占用其他格。
页面浏览时布局不对，先看每一格的分栏宽度是不是正确，再看内外边距。
Chrome浏览器按F12，使用选择器点击页面的任意一个元素，在右边的computed标签页中，都能看到这个元素的四种空间大小，从而判断哪地方设置不对。