微信小程式|CSS的內邊距和圓框

問題描述

在製作小程式的時候會經常用到浮動來設計各種組件的排版，微信小程式對排版的要求很高。光有浮動是遠遠不夠的，如果一個板塊內的組件過多就會變得混亂。所以就需要用設置內邊框來調整位置。微信小程式中會有很多的頭像設置，所以就會用到圓框。那麼如何來設置css盒子的內邊框和頭像的圓框呢？

解決方案

跟網頁一樣小程式也是用很多標籤來定義的。需要用css盒子來設置解決問題，並調用來實現問題。

（1）內邊距

我們需要用到margin這個標籤代表內邊距，用rpx來設置距離單位。在.wxss中設置，然後在wxml中調用就可以了。

margin-left：離左邊的距離 margin-right：離右邊的距離 margin-top：離上邊的距離 margin-bottom：離下邊的距離 margin-top: 100rpx; margin-left: 10rpx

（2）框

用border來定義框線的寬度，用width和heigth來設置框的長寬。

solid來定義顏色。跟內邊距一樣在.wxss中設置，然後在wxml中調用。

.view4{ margin-top: 0rpx; margin-left: 0rpx; width: 800rpx; height: 115rpx; border: 5rpx solid whitesmoke}

（3）圓框

border-radius：rpx定義圓框。

.view3{ margin-top: 350rpx; margin-left: -190rpx; height: 60rpx; width: 220rpx; float: left; background-color: rgb(131, 178, 240); border-radius: r5px}

（4）圓框頭像

跟上面的圓框一樣也是用border-radius來定義，但不同的是後面的設置：%。就是一個圓的弧度不同，rpx是將框的四角成為圓弧而%是成為一個圓。

.view1{ float: left; margin-left: 290rpx; margin-top: 120rpx; border-radius: 50%}

結語

對標籤的正確使用和調用，最麻煩的是對

標籤後面的單位設置，必須充滿耐心，你需要不斷地調才能調到你需要的位置，才能使介面美觀。

END

實習編輯 | 王文星

責編 | 江汪霖