問題描述
在制作小程序的時候會經常用到浮動來設計各種組件的排版,微信小程序對排版的要求很高。光有浮動是遠遠不夠的,如果一個板塊內的組件過多就會變得混亂。所以就需要用設置內邊框來調整位置。微信小程序中會有很多的頭像設置,所以就會用到圓框。那么如何來設置css盒子的內邊框和頭像的圓框呢?
解決方案
跟網頁一樣小程序也是用很多標簽來定義的。需要用css盒子來設置解決問題,并調用來實現問題。
(1)內邊距
我們需要用到margin這個標簽代表內邊距,用rpx來設置距離單位。在.wxss中設置,然后在wxml中調用就可以了。
(2)框
用border來定義框線的寬度,用width和heigth來設置框的長寬。
solid來定義顏色。跟內邊距一樣在.wxss中設置,然后在wxml中調用。
(3)圓框
border-radius:rpx定義圓框。
(4)圓框頭像
跟上面的圓框一樣也是用border-radius來定義,但不同的是后面的設置:%。就是一個圓的弧度不同,rpx是將框的四角成為圓弧而%是成為一個圓。
閱讀本文還閱讀了