微信小程序开发笔记（三）UI

站在巨人的肩膀上，才能看的更远，所以先推荐一下两篇微信小程序UI相关的文章，我感觉挺好的，也许对你也有帮助。

CSS 教程手册
CSS知识点整理

因为我是Android端开发，所以思考方式可能会按照自己在Android中的布局方式去理解。在开发之前，首先把微信官方的组件看一遍，可以直接使用组件的用组件来完成。

一、基础

个人感觉薄荷健康商店小程序挺好看的，这里模仿这个小程序UI设计 和京东商城UI设计。当然功能添加会更多的使用自己在开发过程中遇到的问题以及处理方法，这部分只关注UI。

布局

1、 块级元素 例如

默认占一行高度，一般一行内有一个块级元素，添加新元素时，新元素会自动换行显示。一般作为容器出现，用于组织结构。

特点：
1）总是在新行上开始
2）宽度默认为 width + marginLeft + marginRight + paddingLeft + paddingRight 刚好等于父级元素内容区宽度，除非设定一个新宽度，当设置块级元素宽度为100%,如果当前块级元素​​存在padding margin则会导致块级元素溢出父元素
3）盒子模型高度默认由内容决定
4）盒子模型中高度、宽度、内外边距都可控制
5）可以容纳行内元素和其他块级元素​​​

2、inline 行内元素。例如

特点
1）和其他非块级元素都在一行上
2）盒子模型中高度、宽度、上下margin，上下padding设置均无效，只能设置左右
3）宽度就是文字或图片的宽度，不可改变
4）行内元素宽度、高度都不能直接设置
5）行内元素只能容纳其他行内元素，在行内元素中放置块级元素会引起不必要的混乱​​​​

3、行内块元素。

可以设置宽高内外边距，可简单认为 行内块元素就是把块级元素以行的形式展现

4、浮动和定位

浮动 float
浮动框不在文档的普通流中，可向左或向右移动，直到其外边缘碰到其他包含或者另一个浮动框的边框为止​

定位 position
1）fixed ：固定位置，这个挺好用的，例如购物车列表的结算，列表无论有多少数据，这个结算按钮一定要显示在屏幕底部位置，不能列表过长就把结算按钮覆盖住。这么多废话，还是来张图吧。底部的结算部分用fixed就比较容易实现

2）absolute：绝对定位。相对于屏幕上与自己相邻view来确定自己的位置。

3）relative：相对定位。相对于父容器来确定自己的位置

这几个都可通过 top right left bottom 来实现对组件位置的控制。【备注：可以在开发工具中试一下效果，怎么实现不重要，重要的是在考虑到手机适配问题的情况下你能实现】

4）static：没有定位(没使用过），top ri