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

2017年，微信小程序尺寸已經(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ù)字/百分比。

三.注意點(diǎn)：

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

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

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

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

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

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會(huì)發(fā)生合并，稱之為margin折疊，具體的現(xiàn)象就如果兩個(gè)塊級(jí)元素都設(shè)置了margin，那取兩者之間的最大值做為兩個(gè)元素的外邊距。

注意：margin折疊常規(guī)認(rèn)知：

margin折疊只發(fā)生在塊級(jí)元素上;

浮動(dòng)元素的margin不與任何margin發(fā)生折疊;

設(shè)置了屬性overflow且值不為visible的塊級(jí)元素，將不與它的子元素發(fā)生margin折疊;

絕對(duì)定位元素的margin不與任何margin發(fā)生折疊;

根元素的margin不與其它任何margin發(fā)生折疊.

二.padding：內(nèi)邊距：設(shè)置對(duì)象四邊的內(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對(duì)應(yīng)的分別是上右下左外邊的距離，可取值：auto/數(shù)值/百分比。

四.padding-top，padding-right，padding-bottom，padding-left對(duì)應(yīng)的分別是上右下左內(nèi)邊的距離，可取值：auto/數(shù)值/百分比。