天天看点

微信小程序.wxss比较常用的部分属性说明

background: //背景色

color: //设置字体的颜色

font-size: 36rpx; //属性设置字体大小 ,用rpx会更好一点

line-height: 43rpx; //文字相隔高度,行高

text-align: left; //设置文本的对齐方式(left:向左对齐) center是在中间右边right

display:flex; //元素应该生成的框的类型 相当于两个div横着连还是竖着连 决定主轴的方向,即排列方向

flex-direction:row; //row默认主轴水平方向,起点在左端

justify-content: space-between; // 两端对齐,在中间平分

border-radius: 5%; //圆角边框,单位有很多例如5px

padding: 0 30rpx; //每边的填充边距,上下为0,左右为30 就是边内距

padding-left: 30rpx; //右边填充多少

padding-right: 30rpx; //左边填充多少

margin: 0 auto; //设置所有外边距属性 auto 浏览器计算外边距。

margin-bottom: 10rpx; //设置底边距为2厘米的段落

margin-top: 60rpx; //设置头部空白的距离

border-bottom: 1px dashed #000; //设置底部边距的样式

box-sizing: border-box; //指定边框的宽高

border: 2rpx solid #D9D9D9; //指定边框的宽度,样式(一般固定),颜色

position: relative; //相对定位,也可以absolute绝对定位,但是后面要加left:100px;top:200px;

align-items: center; //属性定义子项在flex容器的项目位于容器的中心(纵向的中心)

justify-content: center; //属性定义子项在flex容器的项目位于容器的中心(横向的中心)

float: left; //向左浮动

clear: both; //不浮动

white-space: nowrap; //规定段落中的文本不进行换行

个人感觉.wxss跟css差不多,css能用的应该在这边也能用,如果大家发现上面有错可以联系我哈,还有什么比较常用的大家可以补充哈。

微信小程序.wxss比较常用的部分属性说明