一.小程序的图片和视频的加载模式影响到的地方
image的mode:widthFix属性会提前占用宽高
视频受到影响后位置会不受控制
解决办法：
1.去掉widthFix前复制好图片的宽高
2.不想图片样式变动则去掉widthFix并自定义为图片宽高（复制下的）
二.小程序的flex布局
Flex布局的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间
Flex布局的特点:
>任意方向的伸缩，向左，向右，向下，向上
>在样式层可以调换和重排顺序
>主轴和侧轴方便配置
>子元素的空间拉伸和填充
>沿着容器对齐
设有display:flex或者display:block的元素就是一个flex container(伸缩容器)，里面的子元素称为flex item(伸缩项目)，flex container中子元素都是使用Flex布局排版
display:block指定为块内容器模式，总是使用新行开始显示，微信小程序的视图容器(view,scroll-view和swiper)默认都是dispaly:block。
display:flex:指定为行内容器模式，在一行内显示子元素，可以使用flex-wrap属性指定其是否换行，flex-wrap有三个值:nowrap(不换行),wrap(换行),wrap-reverse(换行第一行在下面)
主轴和侧轴
Flex布局的伸缩容器可以使用任何方向进行布局。
容器默认有两个轴：主轴(main axis)和侧轴(cross axis)。
主轴的开始位置为主轴起点(main start)，主轴的结束位置为主轴终点(main end),而主轴的长度为主轴长度(main size)。
同理侧轴的起点为侧轴起点(cross start),结束位置为侧轴终点(cross end),长度为侧轴长度(cross size)。
主轴的方向使用flex-direction属性控制,它有4个可选值:
row :从左到右的水平方向为主轴
row-reverse：从右到左的水平方向为主轴
column:从上到下的垂直方向为主轴
column-reverse从下到上的垂直方向为主轴
如果水平方向为主轴，那个垂直方向就是侧轴，反之亦然。
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
flex-flow: <flex-direction> || <flex-wrap>
对齐方式
子元素有两种对齐方式：
justify-conent 定义子元素在主轴上面的对齐方式
align-items 定义子元素在侧轴上对齐的方式
justify-content有5个可选的对齐方式:
flex-start 主轴起点对齐(默认值)
flex-end 主轴结束点对齐
center 在主轴中居中对齐
space-between 两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等
space-around 每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同。
justify-content的对齐方式和主轴的方向有关
align-items
表示侧轴上的对齐方式:
stretch 填充整个容器(默认值)
flex-start 侧轴的起点对齐
flex-end 侧轴的终点对齐
center 在侧轴中居中对齐
baseline 以子元素的第一行文字对齐
align-tiems设置的对齐方式，和侧轴的方向有关
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
item {
flex-grow: <number>; /* default 0 */
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
item {
flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小,负值对该属性无效
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
item {
flex-basis: <length> | auto; /* default auto */
}
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间
align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
该属性可能取6个值，除了auto，其他都与align-items属性完全一致
三.其他小知识
1.border的妙用
border-top/left/right/bottom-style/width/color//对边框的上下左右单一设置属性
2.行高垂直居中
line-height与元素的height高度相同时就完成了垂直居中
3.小程序跳转API
wx.navigateToMiniProgram({
appId: '',
})
}
4.真--—换行
<view> 内容1</view>
<view>内容2</view>
5.视屏封面
开启video标签的controls然后使用poster属性指向封面图片地址
controls poster="{{img}}fm1.jpg"
6.调样式技巧
在调试器中选中元素后编辑样式
浏览器中F12开启
小程序编辑器中自带开启调试器按钮
四.小程序的表单组件
回去看———http://blog.csdn.net/zhao1234567890123456/article/details/53102410
网友评论