3.1　頁面布局

小程序與傳統網頁應用一樣，通過頁面來展示數據和提供交互，需要熟練掌握頁面布局。在前端開發中，布局的傳統解決方案是基于盒模型的，依賴顯示、定位和浮動等屬性來實現。后來又新增了Flex彈性布局方案，可以簡潔、完整、響應式地實現各種頁面布局。

3.1.1　盒模型

在網頁開發中，可以將所有的HTML元素看作一個框。每個盒模型都由實際內容、內邊距、邊框和外邊距四部分構成。在W3C標準盒模型模式下，width和height指實際內容的寬高，padding為內邊距，border為邊框，margin為外邊距，如圖3-1所示。

在小程序中，每個組件就相當于HTML中的元素，它們完全遵循W3C標準盒模型規范。值得注意的是，低版本的IE存在一定的兼容問題，這些瀏覽器的width和height屬性是指內容、內邊距和邊框的寬度總和，稱為IE盒模型。

3.1.2　顯示、定位和浮動

大多數HTML元素被定義為塊級元素或內聯元素，不同顯示類型的元素對于盒模型的處理方式也不同。顯示類型通過display屬性控制，block為塊元素，inline為內聯元素，none為隱藏元素。

塊元素總是在新行上開始，寬高、行高及內外邊距均可控制，寬度默認為100%，主要用來容納內聯元素和其他塊元素。內聯元素和其他塊元素都在一行上，寬高、行高及內外邊距不可改變，寬度就是文字或圖片的寬度，僅用于容納文本和其他內聯元素。隱藏元素不會占用任何空間，即該元素將從頁面布局中消失。

CSS中有3種確定元素位置的機制：普通流、定位和浮動。除非專門指定，否則所有的元素框都在普通流中。也就是說，普通流中元素的位置是按照HTML中書寫的結構，通過盒模型原理計算出來的。

定位通過position屬性來控制，屬性值分為relative（相對定位）、absolute（絕對定位）和fixed（固定定位）。相對定位的元素框會偏移某個距離，但元素仍然占據其未定位前的位置。絕對定位的元素框從文檔流中被完全刪除，并相對于最近的、含有相對定位的祖先元素或整個頁面進行偏移定位。元素原來在正常文檔流中所占的空間將會關閉，就好像該元素從來不存在一樣。元素定位后生成一個塊級框，不論原來它在正常流中生成何種類型的框。因為絕對定位后元素將脫離普通流，所以它們可以覆蓋頁面上的其他元素，并通過設置z-index屬性來控制堆放次序。固定定位與絕對定位類似，只是相對于視窗本身而言，不隨頁面滾動。

浮動通過float屬性來控制，浮動框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，因此文檔普通流中的塊級框表現得就像浮動框不存在一樣。元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用clear屬性來清除浮動。

浮動剛開始主要用于圖文混排，是解決文字環繞問題的，后來發現也可以解決多欄布局問題，從而得到廣泛應用。

3.1.3　Flex布局

Flex布局是2009年W3C提出的一種新的布局方案，目前已經得到了所有瀏覽器和小程序的支持，將成為未來布局的首選方案。

Flex（Flexible Box，彈性布局）用來為盒模型提供最大的靈活性。任何一個容器都可以被設定為Flex布局，設定后，其子元素的float、clear和vertical-align屬性將失效。采用Flex布局的元素稱為Flex容器，它的所有子元素自動成為容器成員，稱為Flex項目。

容器默認存在兩條軸線：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）稱為main start，結束位置稱為main end；交叉軸的開始位置稱為cross start，結束位置稱為cross end。項目默認沿主軸排列。單個項目占據的主軸空間稱為main size，占據的交叉軸空間稱為cross size。

以下8個屬性均可以設置在容器上。

●flex-direction：定義主軸的方向（即項目的排列方向）。

●flex-wrap：定義一條軸線排不下的換行方式。

●flex-flow：指flex-direction和flex-wrap的復合屬性。

●flex-direction：定義靈活項目的方向。

●flex-wrap：定義靈活項目是否拆行或拆列。

●justify-content：定義項目在主軸上的對齊方式。

●align-items：定義項目在交叉軸上的對齊方式。

●align-content：定義多根軸線的對齊方式。

以下6個屬性設置在項目上。

●order：定義項目的排列順序，數值越小排列越靠前。

●flex-grow：定義項目的放大比例，默認為0，即如果存在剩余空間也不放大。

●flex-shrink：定義項目的縮小比例，默認為1，即如果空間不足該項目將縮小。

●flex-basis：定義在分配多余空間之前，項目占據的主軸空間。

●flex：flex-grow、flex-shrink和flex-basis的簡寫。

●align-self：允許該項目有與其他項目不一樣的對齊方式，可覆蓋容器align-items。