小程序常用样式

经典左右居中对齐（绝对布局下）

.center {
  width: 102rpx;
  height: 100px;
  position: absolute;
  left: 50%;
  margin-left: -51rpx;
}

居中、居右

微信小程序view控件布局，水平居中，垂直居中（上下居中）

display: flex;//必须有，不然没有效果 

justify-content: center; /*水平居中*/

align-items: center;/* 上下居中 */

display: flex;flex-direction:row;justify-content:flex-end /*居右*/

排列

display:flex 多栏多列布局浏览器支持情况：火狐直接支持w3c无前缀写法，谷歌和opera支持-webkit- 前缀写法，适合移动端。
flex-flow: row; row横向（左向右）显示 

flex-flow: column; 竖向（上向下）显示

text文字上下位置偏移对齐： line-height

<view class='container'>
<view class='moto-container'  bindtap="bindViewTap">
        <text class='moto' bindtap="onteztop">开启小程序之旅</text>
    </view>
    <view class='moto-container'>
    <text class='moto-two'>开启小程序之旅</text>
    </view>
</view>

样式：

.container{
    /*弹性模型*/
    display:flex;
    /*垂直方向 列方向 排布*/
    flex-direction:column;
    /*居左*/
    align-items:left;
    /*要从整体解决排布的问题是最好的方案*/        
}
.moto-container{
    margin-top:20rpx;
    border:1px solid #405f80;
    width:200rpx;
    height:80rpx;
    border-radius:5rpx;
    /* text-align:center; */
}
.moto{
    font-size:26rpx;
    font-weight:bold;
    line-height:80rpx;
    color:#405f80;
}
.moto-two{
  font-size: 26rpx;
  font-weight: bold;  
}

 效果：

text 嵌套文字 转义字符

<text class='user-name'><text style='color:red'>hol  \n le</text>,七月</text>

效果：

flex-grow=1和flex=1区别

flex=1是升级版，每个item条目的宽度等分，不受子控件宽度的影响

flex-basis

 用于设置子项的占用空间。如果设置了值，则子项占用的空间为设置的值；

如果设置默认是auto，子项占用的宽度使用width 的宽度，width没设置也为 auto，所以子项占用空间由内容决定。

flex = 1 的时候，设置了 三个属性
flex-grow=1，flex-shrink=1，flex-basis=0%

只设置 flex-grow =1 的时候
flex-grow=1，flex-shrink=1（默认值），flex-basis=auto（默认值）

箭头

<view>
    <view class="right-arrow"></view>
    <!-- 方式1：after属性 -->
    <view class="lll">111</view>
    111
    <view class="down-arrow {{down ? 'active' : ''}}" catchtap="change">
    </view>
    <!-- 方式2：class切换属性 -->
    <view class="lll">222</view>
    <view class="two" catchtap="change">
        <view>222</view>
        <view class="down_arrow_two  {{down ? 'show' : ''}}"></view>
    </view>
     <!-- 方式1：after属性-简单版 -->
    <view class="lll">333</view>
    <view class="two" catchtap="change">
        <view class="three {{down ? 'active' : ''}}">333</view>
    </view>
</view>

/* 下箭头 */

.down-arrow {
    display: inline-block;
    position: relative;
    width: 40rpx;
    height: 30rpx;
    margin-right: 20rpx;
}

.down-arrow::after {
    display: inline-block;
    content: " ";
    height: 18rpx;
    width: 18rpx;
    border-width: 0 2rpx 2rpx 0;
    border-color: #999;
    border-style: solid;
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform-origin: center;
    transition: transform 0.3s;
    position: absolute;
    top: 50%;
    right: 10rpx;
    margin-top: -10rpx;
}

/* 加上active旋转成 上箭头 */

.down-arrow.active::after {
    transform-origin: center;
    transform: rotate(-135deg);
    transition: transform 0.3s;
}

.two {
    display: flex;
    flex-direction: row;
}

.down_arrow_two {
    display: inline-block;
    content: " ";
    height: 18rpx;
    width: 18rpx;
    border-width: 0 2rpx 2rpx 0;
    border-color: #f00;
    border-style: solid;
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform-origin: center;
    transition: transform 0.3s;
}

.show {
    transform-origin: center;
    transform: rotate(-135deg);
    transition: transform 0.3s;
}


.three::after {
    display: inline-block;
    content: " ";
    height: 18rpx;
    width: 18rpx;
    border-width: 0 2rpx 2rpx 0;
    border-color: #999;
    border-style: solid;
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform-origin: center;
    transition: transform 0.3s;
}

/* 加上active旋转成 上箭头 */

.three.active::after {
    transform-origin: center;
    transform: rotate(-135deg);
    transition: transform 0.3s;
}

    change() {
        let down = !this.data.down;
        this.setData({
            down: down
        })
    },

文字长度超出-2行文字溢出隐藏

    display:-webkit-box;
    overflow:hidden;
    text-overflow:ellipsis;
    word-break:break-all;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

超出1行：

-webkit-line-clamp: 1;

 4个小角特效

1通过before和after实现上面2个对角

！！！2创建一个底部的布局，然后再创建before和after实现下面2个对角

nth-child(3n)测试效果

测试链接：W3School TIY Editor

常用3n+1,选择3,6,9,即3的倍数

<h1>这是标题1</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
<p>第七个段落。</p>
<p>第八个段落。</p>
<p>第九个段落。</p>

.。。

1rpx下划线适配

1rpx变粗的原因：写的 1rpx 宽度映射到物理像素上效果变粗

解决：统一使用0.3px适配

对比1px，0.5px，0.3px

			<view class="orderNo">
				<view>订单编号：LY-89IUYW009981</view>
				<view class="orderDateTime">刚刚0.3</view>
			</view>
			<view class="orderNo five">
				<view>订单编号：LY-89IUYW009981</view>
				<view class="orderDateTime">刚刚0.5</view>
			</view>
			<view class="orderNo one">
				<view>订单编号：LY-89IUYW009981</view>
				<view class="orderDateTime">刚刚1</view>
			</view>

css

.orderNo {
    display: flex;
    line-height: 80rpx;
    border-bottom: 0.3px solid #D8D8D8;
}

.orderNo.five{
    border-bottom: 0.5px solid #D8D8D8;
}
.orderNo.one{
    border-bottom: 1px solid #D8D8D8;
}

使用overflow：hidden-对齐问题-之后的同行元素不对齐

原因是：行内元素的默认vertical-align:baseline（基线对齐），设置overflow：hidden之后会改变他的基线为下边距边缘

解决：显示设置行内元素对齐方式,vertical-align:top

css属性选择器-获取input type="text"

<input class='aa' type='text' value=''/>

<style>
input[type=text] {
background:red;
}
</style>

shadow内阴影inset

box-shadow: 0px 5px 10px #ccc inset;

...