一、image标签无中生有的边距
对于高度过低（经过测验，这个min高度值在iP5下是14px，iP6下是16px，iP6 Plus下是18px）的<image />自带上边距，在wxml面板下查看padding/margin却没有什么异样，索性手动给了margin-bottom: 32rpx;才解决。
也不知道这个是不是小程序的bug，完成后商品列表后如下图
二、小程序为ListView画一个右箭头
首页
列表页
无意间看到weapp官方的demo里不是用png也不是用image data实现了，更不是canvas，细看真是纯css画的。
参考了https://github.com/weui/weui-wxss/中文件./style/weui.wxss
content:" ";
display:inline-block;
height:6px;
width:6px;
border-width:2px 2px 0 0;
border-color:#c8c8cd;
border-style:solid;
-webkit-transform:matrix(.71,.71,-.71,.71,0,0);
transform:matrix(.71,.71,-.71,.71,0,0);
position:relative;
top:-2px;
position:absolute;
top:50%;
margin-top:-4px;
right:2px;
我作了删改如下：
.hd:after {
content: " ";
height: 6px;
width: 6px;
border-width: 2px 2px 0 0;
border-color: #fff;
border-style: solid;
transform:rotate(45deg);
position: absolute;
margin-top: -4px;
top: 50%;
right: 22px;
}
原理是给个矩形，border-width绘制右边距、上边距，并旋转0.71弧度即45度，得到一个期望的直角，这种设计挺巧妙的，其中：
- content需要给个空格
- position设定为absolute是可选的，但.hd设定参照物为relative却是必须的
- transform设定二选一，为了兼容，全给上，不过没涉及伸缩，我用了transform:rotate更直观，不用计算sin,cos
- top为50%自适应更好
三、伪类:before/:after的其他用法
比如：单元格行前的竖杠、人民币符号、为container底部边框或边距等。
使用伪类，可以使得样式更加简洁，可读性也还好。
高亮标识.png
/*分类文本高亮左侧标识*/
.category-item-active:before {
content: "";
width: 3px;
background: #0099ff;
}
按上面的代码，就有一竖条了。
人民币符号.png
/*人民币符号*/
.price:before {
content: "￥";
}
.amount:before {
content: "待支付 ￥";
}
四、flex值定义比重
我用它在了ListView中一行三列的布局，还可以用在照片预览器九宫格布局
这样就可以定义某一个子元素的权重，如果只定义一个子元素为flex: 1，那么其他的被挤压到最边上，如果有2个子元素，分别定义了flex: 1，那么它们各占50%。
以下示例定义了1、9布局。
/*配送费*/
.express-label {
/*width: 90%;*/
margin-left: 10px;
flex: 9;
}
.express-fee {
/*width: 10%;*/
margin-right: 5px;
flex: 1;
}
在这种场景下，与使用width百分比，效果是相等的。
源码下载：关注公众号【黄秀杰】，回复112。
