前言（也可以說是廢話）：最近一直在做小程序相關項目，所以單對布局方面做一下記錄。最早做的時候，使用的是傳統(tǒng)布局方式，但是自從使用flex布局之后，發(fā)覺flex布局確實比較好用，而且比較容易記憶，如果只是看flex布局相關，可直接往下滑??????，也歡迎提出寶貴意見，或者指正錯誤。?

一、組件屬性

組件的屬性主要有以下5種width height padding margin border

1>width 是寬度 指的是內(nèi)容的寬度

2>height 高度 指的是內(nèi)容的高度

3>padding 是指的內(nèi)邊距（主要是用在父元素和子元素之間的關系中）

padding: top right bottom left; 順序

padding: 20rpx 30rpx 40rpx 70rpx;

padding-top:20rpx;

4>margin 是指的外邊距 (主要用在 兄弟元素之間)

5>border指的是邊框

border屬性能夠被拆開，有兩大種拆開的方式：

1）按3要素:border-width、border-style(solid, dashed,dotted)、border-color

2）按方向：border-top、border-right、border-bottom、border-left

border: 1rpx solid red;

剩下的background（背景：顏色、圖片）font（字體：大小、行高、樣式）等等

下面以圖的形式展示一下這幾個屬性

二、css布局

css常規(guī)布局有三種 ：普通流、浮動、定位 還有一種是flex布局(是一種新的布局方式)

1、普通流

css的默認文檔流(普通流):網(wǎng)頁中的各種元素按照自左往右，自上而下的方式進行布局

在普通流里，塊級元素自上而下排列，行內(nèi)元素自左往右排列

塊級元素(block)：

1>霸占一行，不能與其他任何元素并列

2>能設置寬高，如果不設置寬默認為屏幕寬度

行內(nèi)元素:

inline:與其它行內(nèi)元素并排，不能設置寬高，默認的寬度就是文字的寬度

inline-block:與其它行內(nèi)元素并排，能設置寬高

小程序中的行內(nèi)元素:icon,text,input,label,image(可以設置寬高)

其他的大部分都是塊級元素:view,scroll-view,textarea等等（提示不全）

可以相互轉化 display:block inline_block inline

css中的塊級元素:h1~h6、div、p、ul、li、ol、hr、dl、dt、dd、form

css中的行內(nèi)元素:span(inline-block)、strong、font、b、a、input、textarea、u、img(inline_block)、i、em、br、label

2、浮動

浮動是css布局里面用的最多的屬性

浮動核心就一句話：浮動元素會脫離文檔流并向左/向右浮動，直到碰到父元素或者另一個浮動元素

float: left; float:right;

1>浮動的元素脫標

（脫離了標準流,是可以設置寬高的無論是塊級元素還是行內(nèi)元素）

例子:先添加綠色盒子 然后添加藍色盒子

綠色盒子float:left 藍色盒子沒有float 魯塞盒子脫離了標準文檔流，所以藍色盒子就出現(xiàn)在標準文檔流的第一個盒子，所以就渲染在了頁面的左上方

定位有三種，分別是相對定位、絕對定位、固定定位

2>浮動的元素是相互貼靠的（上圖）

三、定位

1、相對定位

position:relative;

2、絕對定位

position:absolute

3、固定定位

position:fixed

1>相對定位，就是微調(diào)元素位置的。讓元素相對自己原來的位置，進行位置調(diào)整

相對定位是不脫標的，真實的位置是存在的，只不過是影子出去了

也就是說，如果一個盒子想進行位置調(diào)整，那么就要使用相對定位

position:relative;→必須先聲明，自己要相對定位了，

left:100rpx;→然后進行調(diào)整。

top:150rpx;→然后進行調(diào)整。

right:100rpx;

bottom:100rpx;

2>絕對定位

(自動忽略px ?小程序中用rpx)

position:absolute;

top:100rpx;

left:140rpx;

絕對定位是脫離標準文檔流的，所以可以設置寬高

參考點:

絕對定位的參考點，如果用top描述，那么定位參考點就是頁面的左上角，而不是瀏覽器的左上角

如果用bottom描述，那么就是瀏覽器首屏窗口尺寸，對應的頁面的左下角

一個絕對定位的元素，如果父輩元素也是定位了的元素（相對、絕對、固定），那么將以父輩這個元素，為參考點

栗子:下圖中，綠色部分是div的padding，藍色部分是div的內(nèi)容區(qū)域。那么此時，div相對定位，p絕對定位。p將無視父親的padding，在border內(nèi)側為參考點，進行定位

3>固定定位

固定定位，就是相對瀏覽器窗口定位。頁面如何滾動，這個盒子顯示的位置不變。固定定位脫標！

position:fixed;

top:0rpx;

left:0rpx;

4>z-index

z-index值表示誰壓著誰。數(shù)值大的壓蓋住數(shù)值小的。

只有定位了的元素，才能有z-index值。也就是說，不管相對定位、絕對定位、固定定位，都可以使用z-index值。而浮動的東西不能用。

z-index值沒有單位，就是一個正整數(shù)。默認的z-index值是0。

如果大家都沒有z-index值，或者z-index值一樣，那么誰寫在HTML后面，誰在上面能壓住別人。定位了的元素，永遠能夠壓住沒有定位的元素。

從父現(xiàn)象：父親慫了，兒子再牛逼也沒用。

沒有單位：

z-index: 988;

四、flex布局

flex布局相對比較簡單，首先要設置元素為display:flex，該元素的子元素就會按照flex布局來展示。

flex布局主要屬性如下:

舉例

.test {

? display: flex;

? flex-direction: row;

? justify-content: center;

? align-items: flex-end;

? flex-wrap: wrap;

? align-content: center;

}

借用大神的圖，如有侵權，請告知刪除?。。。。。。?/p>

1、flex-direction：元素布局方向，默認是row

2、justify-content：元素在主軸的排列方式，如果flex-direction是row，主軸方向就是x軸，如果flex-direction是column，主軸方向是y軸。默認是flex-start

3、align-items：元素在與主軸垂直的軸（交叉軸）的排列方式，如果flex-direction是row，align-items就是相對于y軸，如果flex-direction是column，align-items就是相對于x軸的排列。默認是flex-start

4、flex-wrap：元素換行排列

5、align-content：彈性布局中的排列，需要和flex-wrap：wrap或者wrap-reverse配合使用