1、overflow
overflow: hidden;
超出部分需要截取类似iOS makestobounds 的性质，适用场景就像父视图设置圆角以后子视图并没有设置，依然看不到圆角的效果，这时就需要这个属性。
2、微信小程序 CSS 选择器::after和::before的简单使用
前两天看文档看到选择器那块儿的时候，前面4个基本都能理解：.class，#id，element，element, element，但后面两个::after和::before（文档中说，分别表示在view 组件的后面和前面插入内容），表示有点没有理解。于是上网仔细查了下。以下是笔记
wxml
<view class="container">
<view class="price">{{price}}</view>
</view>
wxss
.container {
width: auto;
margin: 30rpx;
background-color: #fff;
text-align: center;
}
.price {
position: relative;
display: inline-block;
font-size: 78rpx;
color: red;
}
.price::before {
content: "金额：¥";
position: absolute;
font-size: 40rpx;
top: 30rpx;
left: -160rpx;
color: black;
}
.price::after {
content: ".00 元";
font-size: 30rpx;
top: 40rpx;
position: absolute;
right: -90rpx;
color: black;
}
js
Page({
onLoad: function() {
this.setData({
price: 100
})
}
})
效果
13.jpg
3、wxml 里面用到js的变量问题
<text style='color: #{{isSuccess?"34b74a":"ff4e00"}};'>预约成功！</text>
{{}}双括号里面一定是变量，若里面内容有不是变量的需要用引号引起来，以示区别（eg：?"34b74a":"ff4e00"）。
4、给view添加背景图片的问题：
一般有两种方法:
background-image: url(https://xxx/xxx.pmg);
background-image: url(转换之后的base64字符串);
有时候图片不会按照比例适应，需要用到下面这个方法
background-size: cover;//**cover按照比例添加**
background-size: 65rpx 45rpx; //设置宽高
background-repeat: no-repeat;//不铺满
background-position: 90% 5%;//设置坐标（这里坐标可以是rpx，也可以是百分比，还可以是top right这样设置）
5、设置父view透明度
background-color: rgba(255, 255, 255, 0.8);
opacity: 0.8;
这两个属性其实都可以，但是用第一个设置的话父view中的子view透明度不会跟着改变，第二个会跟着改变，推荐第一个。
6、小程序display属性区别
display:inline 转化成内联元素，不换行；
display:block转换成块元素，换行；
display:inline-block内联块元素，既不换行又可以使用块元素所拥有的属性，类似于块元素加了浮动效果，但低版本浏览器对这个不支持。
7、wxml里面 数组和字典的判断
数组一般可以用length来判断，字典目前没有发现特别好的方法，我是同时判断字典和字典里面的字段是否同时存在：
requestData.lightService && requestData.lightService.newsTypeId
8、去掉弹性效果
json中添加 disablescroll ：true
9、禁止滑动
catchtouchmove ：true
9、flex属性的解析
flex-grow 当有多余控件时，元素的放大比例
默认为0，即如果存在剩余空间，也不放大
如果所有元素的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个元素的flex-grow属性为2，其他元素都为1，则前者占据的剩余空间将比其他元素多一倍。
flex-shrink 当空间不足时，元素的缩小比例
默认为1，即如果空间不足，该元素将缩小
如果所有元素的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个元素的flex-shrink属性为0，其他元素都为1，则空间不足时，前者不缩小。和flex-grow用法基本一致
flex-basis 元素在主轴上占据的空间
它可以设为跟width或height属性一样的值（比如350px），则元素将占据固定空间。
flex 是grow shrink basis的简写
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
flex: 0 1 50px
10、css中高度设置的场景
当我们一个界面中，上面是滑动的区域，底部是固定的UI，此时我们设置上面区域的高度可通过100%-底部高度就可以了，具体实现：
height: calc(100% - 40px);
