一、盒子模型：
margin(外邊距)，邊框外的區域，外邊距是透明的；
border(邊框)，圍繞在內邊距和內容外的部分；
padding（內邊距），填充屬性，是指內容周圍的區域，內邊距也是透明的；
content（內容），盒子的實際內容，用於展示頁面組件。
在盒子模型中，確定內容位置的，是通過margin和padding這兩個屬性來確定的，而不是top,bottom,left,right等，這些屬性在盒子模型中是失效的。
在文檔流中，通過設置margin:0 auto;使元素水平居中，此方式只適合在普通文檔流情況下，在絕對定位和浮動中，元素不在屬於正常文檔流，因此不適用。
二、顯示方式Display：
display屬性用來設定，元素是否顯示或元素行內顯示還是塊級顯示，以及flex布局也是需要通過設定display屬性完成的。屬於文檔流的布局格式。
display:none和visibility:hidden屬性都可以用來指定元素是可見還是隱藏。
display:none；隱藏某個元素的同時會釋放元素占用的頁面空間。
visibility:hidden；隱藏某個元素時，元素占用的空間不被釋放，元素的布局依然起作用。
| 值 | 描述 |
| none | 此元素不會被顯示 |
| block | 此元素將會被顯示為塊級元素，前后帶有換行符 |
| inline | 默認，此元素被顯示為內聯元素，前后沒有換行符 |
| inline-bolck | 行內塊元素 |
| flex | flex布局顯示 |
| list-item | 此元素會作為列表顯示 |
| run-in | 此元素會根據上下文作為塊級元素或內聯元素顯示 |
三、定位Position：
| 值 | 描述 |
| absolute | 生成絕對定位的元素，相對於static定位以外的第一個父元素進行定位。元素從文檔流中完全刪除， 元素原先在正常文檔流中所占的空間會關閉，就像該元素不存在一樣，如果文檔流中該位置有元素， 則會出現重疊現象。絕對定位於文檔流無關，因此不占據文檔流空間 元素的位置通過"left"、“top”、“right”、“bottom”屬性來定義。 |
| relative | 生成相對元素，相對於正常位置進行定位。依舊屬於文檔流中，占用文檔流 中的空間。通過"left"、“top”、“right”、“bottom”屬性使元素距離原位置進行偏移。 |
| static | 默認樣式，沒有定位，忽略樣式表中"left"、“top”、“right”、“bottom”屬性的影響。 |
| fixed | 生成絕對定位的元素，相對於設備顯示窗口進行定位。 |
四、浮動Float：
浮動屬性產生之初是為了實現“文字環繞”的效果，讓文字環繞圖片在網頁實現類似word中“圖文混排”。
定位方式：
浮動讓元素脫離正常流，向父容器的左邊或右邊移動直到碰到包含容器的邊【經測試碰到padding即停】或者碰到其他浮動元素。文本和行內元素將環繞浮動元素。
Note：
1、碰到容器的邊指的是容器的padding內邊。
2、浮動元素脫離正常流，意思是布局時后面元素當它不存在（文字還是當它存在，環繞其身邊），但仍然在dom樹上。后面的元素可能會被遮擋。
//index.wxml
<view class='view1'>紅色</view>
<view class='view2'>綠色</view>
<view class='view3'>黃色</view>
//index.wxss
.view1{
width: 300rpx;
height: 300rpx;
background-color: red;
float: left;
}
.view2{
width: 500rpx;
height: 300rpx;
background-color: green;
}
.view3{
width: 300rpx;
height: 300rpx;
background-color: yellow;
}
| 屬性值 | 說明 |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
| none | 默認值，元素不浮動，並會顯示其在文本中出現的位置 |
| inherit | 規定應該從父元素繼承float屬性的值 |
浮動的包裹性和破壞性：
包裹性：包裹性指的是元素尺寸剛好容納內容。可以利用浮動的包裹性來達到父容器自適應內部元素寬度。
破壞性：破壞性是指元素浮動后可能導致父元素高度塌陷。
浮動破壞性原理：
因為浮動元素被從文檔正常流中移除了，父元素當然還處在正常流中，所以父元素不能被浮動元素撐大。
清除浮動---clear屬性：
取值：
-
- left:元素左側不允許有浮動元素
- ight:元素右側不允許有浮動元素
- both:元素左右兩側均不允許有浮動元素
- none:默認值，允許浮動元素出現在兩側
五、Flex布局：
盒子模型有它的不足之處，如我們需要元素垂直居中布局的時候，或者設計元素根據屏幕形式自動伸縮的響應式頁面的時候，僅僅依靠盒子模型很難實現。Flex布局意即彈性布局，也被稱為柔性布局，它讓子項目方便的改變寬度、高度和順序，為盒子模型提供最大的布局靈活性。Flex布局的元素大小是可伸縮的，可根據需要擴展自己的尺寸來填滿可用空間。而常規的文檔流布局中方向是確定的，塊就是從上到下，內聯就是從左到右，而在flex布局中，方向是不可預知的。
| 屬性 | 參數 | 說明 |
| flex-direction | 主軸方向 |
row：默認值，水平方向，從左到右； row-reverse:水平方向，從右到左； column:垂直方向，從上到下； cokumn-reverse:垂直方向，從下到上 |
| flex-wrap | 換行屬性 | nowrap:默認值，不換行； wrap:換行，由上到下排列，項目的第一行在最上方； wrap-reverse:換行，由下到上排列，項目的第一行在最下方。 |
| flex-flow | 主軸方向和換行的縮寫 | rowwrap：水平方向，且換行； |
| justify-content | 主軸線的對齊方式 | flex-start:默認值，左對齊； flex-end:右對齊； center：居中對齊； space-between：兩端對齊，元素間隔相等； space-around:項目等距分布在行里，兩端保留項目間距一半的空間。 |
| align-items | 側周對齊屬性 | flex-start:默認值，左對齊； flex-end:右對齊； center：居中對齊； baseline：項目第一行文字的基線對齊； stretch:默認值，上下兩側對齊，將占滿整個容器高度。 |
| align-content | 多行項目的對齊方式 | flex-start:默認值，左對齊； flex-end:右對齊； center：居中對齊； space-between：兩端對齊，元素間隔相等； space-around:項目等距分布在行里，兩端保留項目間距一半的空間； stretch:默認值，上下兩側對齊，將占滿整個側軸。 |
| order | 順序 | 數值小的排在前面，大的排在后面。 |
| flex-grow | 放大比例 | 默認值為0，將元素放到到原來的幾倍 |
| flex-shrink | 縮小比例 | 將元素縮小到原來的幾倍。 |
| flex-basis | 根據主軸剩余空間，決定在主軸中的元素是否拉伸或者壓縮 | 默認值為auto,設置為auto時不拉伸也不壓縮。可以設定為固定值。 它的優先級高於對元素width的設定，當同時設定width和 flex-basis大小時， 最后會按照 flex-basis的大小設定。 |
| flex | flex-grow， flex-shrink， flex-basis的簡寫形式 |
默認為flex:0,1auto; |
| align-self | 單項對齊屬性，用於設置單個項目的對齊方式， 設定值可以和align-items屬性的其他項目的對齊方式不同。 |
默認值為auto ,表示繼承容器的align-items屬性。其他為flex-start等。 |