從這篇文章開始，會利用幾個篇幅，我將跟大家分享 從CSS1到CSS3都是如何實現頁面佈局的(當然，所指的範疇是利用CSS技術)。
由於盒子模型技術內容比較多，這篇文章我將着重講解知識點。
下一篇文章，我會帶領大家開發一個兼容 pc端瀏覽器和 移動端瀏覽器的彈性佈局web界面的實例。希望大家能從中領受到CSS3在佈局方面的強大功能。
好了，長話短說，現在開始我們的《CSS3中的彈性流體盒模型技術詳解》之旅吧！
在講解CSS3中新增的彈性佈局屬性之前，我們先回顧一下CSS1 和 CSS2中都已經定義了哪些佈局方面的屬性，這樣也會增加我們理解彈性佈局。
其實我們現在有很多一部分人，你們剛剛接觸CSS層疊樣式表，或者接觸有一段時間了，但是卻沒有很好的去消化與理解。可能平時你們還一直在使用table，然後通過不斷了合併單元格來實現網頁佈局。希望我今天的這篇文章能徹底改變大家的觀念。
Q：如何理解盒子模型？
A：大家可以想一想，在現實生活中，如果我們拿一個盒子來裝東西，那麼盒子裏面的東西是不是跟這個盒子之間會有空隙呢？站在裏面物品的角度，則它們之間的間隙距離是不是就可以構成 物品到盒子的外邊距。如果站在盒子的角度，則從盒子到物品的距離，是不是可以看出盒子的內邊距呢。 當然，盒子還是會有寬和高的。外邊距的英文就是margin，內邊距的英文是padding，寬是width，高是height。下面是盒子模型的2D圖：
CSS 1中定義了盒子模型的基本元素，詳細屬性請看下錶：
| margin-top | 元素頂部外邊距 |
| margin-right | 元素右側外邊距 |
| margin-bottom | 元素底部外邊距 |
| margin-left | 元素左側外邊距 |
| margin | 這是一個複合屬性，定義 元素 各個邊的外邊距， 屬性值的順序是: 上，右，下，左 |
| border-top | 元素上邊框樣式 |
| border-right | 元素右邊框樣式 |
| border-bottom | 元素下邊框樣式 |
| border-left | 元素左邊框樣式 |
| border-width | 元素邊框寬度 |
| border-top-width | 元素上邊框寬度 |
| border-right-width | 元素右邊框寬度 |
| border-bottom-width | 元素下邊框寬度 |
| border-left-width | 元素左邊框寬度 |
| border | 複合屬性，可以同時設置各個邊框樣式 |
| padding-top | 元素上側內邊距 |
| padding-right | 元素右側內邊距 |
| padding-bottom | 元素下側內邊距 |
| padding-left | 元素左側內邊距 |
| padding | 複合屬性，同時設置各個邊框內邊距 |
| width | 設置元素的寬度 |
| height | 設置元素的高度 |
| float | 設置元素浮動顯示 |
| clear | 清除元素的浮動效果 |
| border-color | 設置邊框顏色 |
| border-style | 設置邊框樣式 |
CSS 2在以上基礎上，又做了一些細化：
| border-top-color | 元素上邊框顏色 |
| border-right-color | 元素右邊框顏色 |
| border-bottom-color | 元素下邊框顏色 |
| border-left-color | 元素左邊框顏色 |
| border-top-style | 元素上邊框樣式 |
| border-right-style | 元素右邊框樣式 |
| border-bottom-style | 元素下邊框樣式 |
| border-left-style | 元素左邊框樣式 |
在CSS2的基礎上，CSS3增加了彈性盒模型佈局屬性，這爲我們開發適合現代移動瀏覽器提供了便利：
| box-align | 子元素在盒子內垂直方向上的空間分配 |
| box-pack | 子元素在盒子內水平方向的空間分配方式 |
| box-direction | 盒子的顯示順序 |
| box-flex | 元素在盒子內的自適應尺寸 |
| box-flex-group | 自適應子元素羣組 |
| box-lines | 子元素分列顯示 |
| box-ordinal-group | 子元素在盒子內的顯示位置 |
| box-orient | 盒子分佈的座標軸 |
下面我將對CSS3中新增的彈性盒模型屬性做詳細介紹，並通過實際coding來帶領大家深刻認識彈性佈局的威力。
首先我們先創建一個html頁面，代碼如下所示：
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <link rel=”stylesheet” href=”styles.css”> <title>CSS3彈性佈局</title> </head> <body> <div class=”row“> <div class=”sidebar“> 我是邊欄 </div> <div class=”middle“> 我是中間內容 </div> <div class=”article“> 我是頁面主體 </div> </div> </body> </html> |
接着我們給頁面添加上基本的樣式，如下所示：
*{ /*清除所有元素的默認外邊距和內邊距*/ margin:0; padding:0; }
.row{/*設置外圍容器樣式*/ margin:auto; border:1px solid black; width:600px; height:400px; margin-top:50px; }
.sidebar{/*給側邊欄添加樣式*/ background-color:#00B366; }
.middle{/*給中間區域添加樣式*/ background-color:#80C8FE; }
.article{/*給主體內容添加樣式*/ background-color:#FEB380; } |
運行頁面，查看一下目前樣式的應用效果:
首先聲明：要想運用CSS3的彈性佈局，需要將父容器設置爲display:box 或 display:inline-box，下面不在贅述。
box-orient 作用： box-orient屬性規定了子元素應該是水平方向還是垂直方向顯示。
box-orient 語法： box-orient: horizontal | vertical | inline-axis | block-axis | inherit;
語法解釋: horizontal 和 inline-axis 規定了子元素以水平方向顯示，兩者的顯示效果差不多，具體差異不清。vertical 和 block-axis 規定了子元素以垂直方向顯示， 兩者的顯示效果差不多，具體差異不清 。
注意：由於此屬性還處於測試當中，所以爲了兼容webkit核心的瀏覽器，需要加上-webkit-前綴，Mozilla核心的瀏覽器，需要加上前綴-moz-。
示例：
修改樣式表文件，添加如下樣式代碼：
.row{/*設置外圍容器樣式*/ margin:auto; border:1px solid black; width:600px; height:400px; margin-top:50px; display:-webkit-box;/*兼容webkit或mozilla核心瀏覽器，啓用彈性盒子模型*/ display:-moz-box; display:box; -webkit-box-orient:horizontal;/*水平方向顯示，兼容webkit和mozilla核心瀏覽器*/ -moz-box-orient:horizontal; box-orient:horizontal; } |
運行demo頁面，效果如下：
通過以上效果圖，大家可以發現div已經變成了水平佈局，且寬度是正好包裹內容， css2.1如果需要實現此效果，就得通過float:left;來實現了。
我們再次修改代碼，實現垂直方向上佈局：
.row{/*設置外圍容器樣式*/ margin:auto; border:1px solid black; width:600px; height:400px; margin-top:50px; display:-webkit-box;/*兼容webkit或mozilla核心瀏覽器，啓用彈性盒子模型*/ display:-moz-box; display:box; -webkit-box-orient:vertical;/*垂直方向顯示，兼容webkit和mozilla核心瀏覽器*/ -moz-box-orient:vertical; box-orient:vertical; } |
運行頁面，效果如下圖所示:
inline-axis 和 block-axis 運行效果分別與horizontal和vertical一樣，這裏大家可以自行去測試。
inherit屬性值是佈局方式繼承自父元素，如果父元素是水平的，則它也使用水平佈局，這個大家可以自行去測試。
box-align 作用：box-align規定了如何在垂直方向上對齊框內的子元素。
box-align 語法：box-align: start | end | center | baseline | stretch;
| start | 對於正常方向的框，每個子元素的上邊緣沿着框的頂部放置。 對於反方向的框，每個子元素的下邊緣沿着框的底部放置。 |
| end | 對於正常方向的框，每個子元素的下邊緣沿着框的底部放置。 對於反方向的框，每個子元素的上邊緣沿着礦的頂部放置。 |
| center | 均等地分割多餘的空間，一半位於子元素之上，一半位於子元素之下。 |
| baseline | 如果box-orient是inline-axis或horizontal，所有子元素均與其基線對齊。 |
| stretch | 拉伸子元素以填充包含塊 |
注意：由於此屬性還處於測試當中，所以爲了兼容webkit核心的瀏覽器，需要加上-webkit-前綴，Mozilla核心的瀏覽器，需要加上前綴-moz-。
示例:
添加start樣式，代碼如下:
.row{/*設置外圍容器樣式*/ margin:auto; border:1px solid black; width:600px; height:400px; margin-top:50px; display:-webkit-box;/*兼容webkit或mozilla核心瀏覽器，啓用彈性盒子模型*/ display:-moz-box; display:box; -webkit-box-orient:horizontal;/*水平方向顯示，兼容webkit和mozilla核心瀏覽器*/ -moz-box-orient:horizontal; box-orient:horizontal; -webkit-box-align:start;/*正常佈局下，吸附在頂端顯示，相反佈局下，吸附在底部顯示*/ -moz-box-align:start; box-align:start; } |
運行效果如下所示：
接着，我們讓子元素吸附在底部顯示，修改代碼如下：
.row{/*設置外圍容器樣式*/ margin:auto; border:1px solid black; width:600px; height:400px; margin-top:50px; display:-webkit-box;/*兼容webkit或mozilla核心瀏覽器，啓用彈性盒子模型*/ display:-moz-box; display:box; -webkit-box-orient:horizontal;/*水平方向顯示，兼容webkit和mozilla核心瀏覽器*/ -moz-box-orient:horizontal; box-orient:horizontal; -webkit-box-align:end;/*正常佈局下，吸附在底部顯示，相反佈局下，吸附在頂部顯示*/ -moz-box-align:end; box-align:end; } |
此時的運行效果如下所示：
center和baseline的功能，大家可以自行測試，這裏着重強調一下，如果屬性值設爲stretch，則它會拉伸填充滿父元素，其實也就是未設置box-align時候的樣式，所以說如果你要設置stretch，那你直接就別設置box-align屬性，因爲沒意義了。
修改屬性值爲stretch，代碼如下：
.row{/*設置外圍容器樣式*/ margin:auto; border:1px solid black; width:600px; height:400px; margin-top:50px; display:-webkit-box;/*兼容webkit或mozilla核心瀏覽器，啓用彈性盒子模型*/ display:-moz-box; display:box; -webkit-box-orient:horizontal;/*水平方向顯示，兼容webkit和mozilla核心瀏覽器*/ -moz-box-orient:horizontal; box-orient:horizontal; -webkit-box-align:stretch;/*其實此效果就是不設置box-align時候的樣式*/ -moz-box-align:stretch; box-align:stretch; } |
效果如下：
好了，由於篇幅有限，這篇就先講到這裏。
歡迎大家加入互聯網技術交流羣：62329335
個人申明：所分享博文，絕對原創，併力爭每一個知識點都通過實戰演示來進行驗證。