一、盒子模型：

　　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；隱藏某個元素時，元素佔用的空間不被釋放，元素的佈局依然起作用。

三、定位Position：

四、浮動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;
}

　　浮動的包裹性和破壞性：

　　包裹性：包裹性指的是元素尺寸剛好容納內容。可以利用浮動的包裹性來達到父容器自適應內部元素寬度。

　　破壞性：破壞性是指元素浮動後可能導致父元素高度塌陷。

　　浮動破壞性原理：

　　因為浮動元素被從文件正常流中移除了，父元素當然還處在正常流中，所以父元素不能被浮動元素撐大。

　　清除浮動---clear屬性：

　　取值：

• • left:元素左側不允許有浮動元素
  • ight:元素右側不允許有浮動元素
  • both:元素左右兩側均不允許有浮動元素
  • none:預設值，允許浮動元素出現在兩側

五、Flex佈局：

　　盒子模型有它的不足之處，如我們需要元素垂直居中佈局的時候，或者設計元素根據螢幕形式自動伸縮的響應式頁面的時候，僅僅依靠盒子模型很難實現。Flex佈局意即彈性佈局，也被稱為柔性佈局，它讓子專案方便的改變寬度、高度和順序，為盒子模型提供最大的佈局靈活性。Flex佈局的元素大小是可伸縮的，可根據需要擴充套件自己的尺寸來填滿可用空間。而常規的文件流佈局中方向是確定的，塊就是從上到下，內聯就是從左到右，而在flex佈局中，方向是不可預知的。