天天看點

微信小程式.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比較常用的部分屬性說明