商城系統(tǒng) 注冊

微信小程序尺寸及外邊距設(shè)置調(diào)整技巧

2020-09-29|HiShop
導(dǎo)讀:17年, 微信小程序尺寸 早已是時(shí)下微信小程序設(shè)計(jì)方案最熱門的話題,下邊將從各個(gè)方面來談?wù)勎⑿判〕绦虺叽缂巴膺吘嘣O(shè)定有關(guān)的內(nèi)容。...

微信小程序尺寸已經(jīng)是當(dāng)下微信小程序設(shè)計(jì)最熱門的話題,下面將從多方面來談?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ù)字/百分比。

 

微信小程序尺寸及外邊距設(shè)置調(diào)整技巧

微信小程序尺寸及外邊距設(shè)置調(diào)整技巧

三.注意點(diǎn):

雖然有很多的選擇,不過在小程序中還是盡量用rpx吧,省的適配。

當(dāng)元素設(shè)置了line-height的同時(shí),也設(shè)置了max-height,實(shí)際取值的時(shí)候會以max-height的值顯示,剩余的將隱藏。

二:外邊距(margin)和內(nèi)邊距(padding)

說到邊距,那這個(gè)基本上跟Android里的概念差不多,先來看一個(gè)圖吧,(雖然標(biāo)注的丑了點(diǎn),不過那不是重點(diǎn))

微信小程序尺寸及外邊距設(shè)置調(diào)整技巧

一.margin:外邊距;設(shè)置對象四邊的外延邊距。

margin: 20rpx 10rpx 25rpx 10rpx :如果提供全部四個(gè)參數(shù)值,將按上、右、下、左的順序作用于四邊。

margin:20rpx:如果只提供一個(gè),將用于全部的四邊。

margin:20rpx 20rpx:如果提供兩個(gè),第一個(gè)用于上、下,第二個(gè)用于左、右。

margin:20rpx 20rpx 10rpx:如果提供三個(gè),第一個(gè)用于上,第二個(gè)用于左、右,第三個(gè)用于下。

某些相鄰的margin會發(fā)生合并,稱之為margin折疊,具體的現(xiàn)象就如果兩個(gè)塊級元素都設(shè)置了margin,那取兩者之間的最大值做為兩個(gè)元素的外邊距。

注意: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 :如果提供全部四個(gè)參數(shù)值,將按上、右、下、左的順序作用于四邊。

padding:20rpx:如果只提供一個(gè),將用于全部的四邊。

padding:20rpx 20rpx:如果提供兩個(gè),第一個(gè)用于上、下,第二個(gè)用于左、右。

padding:20rpx 20rpx 10rpx:如果提供三個(gè),第一個(gè)用于上,第二個(gè)用于左、右,第三個(gè)用于下。

三.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ù)值/百分比。

 

電話咨詢 預(yù)約演示 0元開店