经典左右居中对齐(绝对布局下)
.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;
...