基本知识
盒子模型：
盒子模型是CSS的基础，CSS假定每一个元素都会生成一个或多个矩形框，每个元素矩形框中心设定一个盒子，每个框中新都有一个内容区，每个盒子都有内边距（padding）和边界(border)和外边界(margin)和内容。
块级元素
块级元素显示方式是主要分为块级元素和行内元素。元素的显示方式是display属性控制的，块级元素会默认占一行行高，一般认为一行内只有一个块级元素（浮动后除外）当再添加新的块级元素时自动换行显示，块级元素一班作为容器出现，用于组织结构。一些元素默认为块级元素，如小程序的view组件，而一些默认是行内元素，我们可以通过display:block设置为块级元素。
示例：view默认是块级元素，下面我们使用<view />为大家演示块级元素的特性，如：
<!--块级元素展示-->
<!--每个块级元素占一行-->
<view style='border:solid 1px;'>
第一个块级元素
</view>
<!--默认情况下块级元素和父级元素宽度相同，刚好撑满内容区-->
<view style='border:solid 10px; margin:10px; padding:10px;'>第二个块级元素演示</view>
<!--即时宽度不足仍会占领一行，让其他元素换行-->
<view style='border:solid 1px; width:200px; '>
第三个块级元素
</view>
<!--元素随内容宽度进行调整-->
<view style='margin-top:20px; height:100px; border:solid 1px;'>高度设定查看</view>
行内元素
除了块级元素，最常见的就是行内元素了，设置display的属性为inline可以将一个元素设置为行内元素，小程序的<text>就是一个行内组件，行内元素的属性总结如下:
盒子模型中的 width,height,上下margin,上下padding 设置均无效，只能设置左右margin 和padding
行内块元素
行内块元素时块级元素和行内元素的混合物inline-block，可以设置块级元素的属性，显示时相当于行内元素镶嵌再文本中
示例：
<!--展示混合的效果-->
这次示例我们展示行内混合布局的效果，
<view style='border:solid 1px; margin:1px; padding:1px; '>VM134:1 请注意无 AppID 关联下，调用 wx.login 是受限的, API 的返回是工具的模拟返回</view>
哈哈
<view style='border:solid 1px; margin:1px; padding : 1px; display:inline-block'>行内混合布局</view>
展示完成后，大家有没有看出不同呢
浮动和定位
这个html 中的布局讲的就挺详细的了，这里就不在赘述了
Flex布局
这个时最近几年新出的代替浮动定位中的不足产生的新的定位方式。Flex主要时容器和元素组成，采用Flex布局的元素，成为Flex容器（Flex container）它的所有直接子元素直接构成容器成员，成为Flex项目（Flex item）。可以设置display: flex;或者时display:inline-flex将任何一个子元素设置为flex布局。如图所示，容器默认存在两个不同的轴，水平的主轴和垂直的交叉轴。
容器的属性
dispaly：通过display来设定是否为flex布局
flex-direction:通过设定主轴的方向来设定项目的排列方式
flex-warp:排列换行设置
flex-flow: flex-direction和flex-warp的简写形式
1.display
flex用于产生布局：两种属性 flex和inline-flex
2.flex-direction
主轴的方向，即项目的排列的方向
语法：flex-direction:row|row-reverse|column|column-reverse
row:主轴方向在行方向上
row-reverse:反转效果
column:列方向
column-reverse:反转效果
3.flex-warp
默认情况下，项目都排在一条直线上，flex-wrap用来指定如果一条轴排列不下的话，该如何换行
flex-wrap:nowrap|wrap|wrap-reverse;
nowrap:不换行，全部挤在一起
wrap自动换行
这是大体上经常用到的一些属性及相关属性值，当然还是不全的，如果以后发现还有经常用到的属性值我会不管补充。