探讨小程序开发的布局

谈到小程序布局就不得不谈WXSS (WeiXin Style Sheets)！WXSS是微信小程序专用的样式语言。WXSS与css虽然在尺寸单位和样式导入不同，但是，具有CSS大部分特性。小程序的样式，由项目公共样式和页面样式共同作用。与Web开发不同的是，开发者不需要去优化样式文件的请求数量，只需要考虑代码的组织，样式文件最终会被编译优化。

小程序常见的五种布局方式：

表格布局 是最早出现的布局方式。table设计初衷，是为了呈现表格化数据。属于歪打正着的一种布局方式，兼容于所有的页面表现。

定位布局 根据参考元素的不同，设置当前元素的位置。常见的五种定位方式：静态定位（static，正常的文档流)、绝对定位（absolute，相对于已定位父元素）、相对定位（relative，相对其正常位置）、粘性定位（sticky，基于用户的滚动位置）、窗口定位（fixed ，基于可视窗口的固定位置）

浮动布局 出现在css2.0中，设置元素浮动后，元素将脱离普通流，可以控制元素在水平上左右移动，再通过margin属性调整位置。主要用于设置多个元素，共存于一行。

弹性盒子布局 是一种一维布局模型，大部分的属性作用于主轴。能够在子元素的大小未知或动态变化情况下，调节子元素的高度、宽度和排布的顺序，适应布局空间。

网格布局 是一个基于网格的二维布局系统，借鉴了平面装帧设计中的格线系统，将页面划分为一个个网格，定义这些网格的大小、位置、层次，组合做出各种各样的布局。可以看作是table布局的升级版，由Microsoft提出。

本文由尤佳coding原创，欢迎关注，带你一起长知识！