微信小程序尺寸及css外邊距調(diào)整技巧
2017年,微信小程序尺寸已經(jīng)是當(dāng)下微信小程序設(shè)計最熱門的話題,下面將從多方面來談?wù)勎⑿判〕绦虺叽缂巴膺吘嘣O(shè)置相關(guān)的內(nèi)容。
一:尺寸(Dimension)
一.尺寸屬性:允許控制元素的寬和高,還可以設(shè)置行間距。
1.height:設(shè)置元素的高度。
2.line-height:設(shè)置行高。
3.min-height: 最小行高。
4.max-height:最大行高。
5.width:設(shè)置元素的寬度。
6.max-width:最大寬度。
7.min-width:最小寬度。
二.取值;auto/數(shù)字/百分比。
三.注意點:
雖然有很多的選擇,不過在小程序中還是盡量用rpx吧,省的適配。
當(dāng)元素設(shè)置了line-height的同時,也設(shè)置了max-height,實際取值的時候會以max-height的值顯示,剩余的將隱藏。
二:外邊距(margin)和內(nèi)邊距(padding)
說到邊距,那這個基本上跟Android里的概念差不多,先來看一個圖吧,(雖然標(biāo)注的丑了點,不過那不是重點)
一.margin:外邊距;設(shè)置對象四邊的外延邊距。
margin: 20rpx 10rpx 25rpx 10rpx :如果提供全部四個參數(shù)值,將按上、右、下、左的順序作用于四邊。
margin:20rpx:如果只提供一個,將用于全部的四邊。
margin:20rpx 20rpx:如果提供兩個,第一個用于上、下,第二個用于左、右。
margin:20rpx 20rpx 10rpx:如果提供三個,第一個用于上,第二個用于左、右,第三個用于下。
某些相鄰的margin會發(fā)生合并,稱之為margin折疊,具體的現(xiàn)象就如果兩個塊級元素都設(shè)置了margin,那取兩者之間的最大值做為兩個元素的外邊距。
注意:margin折疊常規(guī)認(rèn)知:
margin折疊只發(fā)生在塊級元素上;
浮動元素的margin不與任何margin發(fā)生折疊;
設(shè)置了屬性overflow且值不為visible的塊級元素,將不與它的子元素發(fā)生margin折疊;
絕對定位元素的margin不與任何margin發(fā)生折疊;
根元素的margin不與其它任何margin發(fā)生折疊.
二.padding:內(nèi)邊距:設(shè)置對象四邊的內(nèi)部邊距。
padding: 20rpx 10rpx 25rpx 10rpx :如果提供全部四個參數(shù)值,將按上、右、下、左的順序作用于四邊。
padding:20rpx:如果只提供一個,將用于全部的四邊。
padding:20rpx 20rpx:如果提供兩個,第一個用于上、下,第二個用于左、右。
padding:20rpx 20rpx 10rpx:如果提供三個,第一個用于上,第二個用于左、右,第三個用于下。
三.margin-top,margin-right,margin-bottom,margin-left對應(yīng)的分別是上右下左外邊的距離,可取值:auto/數(shù)值/百分比。
四.padding-top,padding-right,padding-bottom,padding-left對應(yīng)的分別是上右下左內(nèi)邊的距離,可取值:auto/數(shù)值/百分比。
-
微信小程序商城系統(tǒng)開發(fā)其實很簡單
微信小程序商城系統(tǒng)開發(fā)其實很簡單,只需要五步就可以完成,整個過程包括開發(fā)、上線、發(fā)布都可以輕松搞定...詳情
第二部分:如何開通一個小商店