關於開發CSS3彈性盒模型的方法之一

這篇文章主要為大家分享了CSS3彈性盒模型開發筆記，對相容性，不同屬性進行介紹，感興趣的小夥伴們可以參考一下

彈性盒模型（Flexible Box Moudle），該模型用於決定元素在盒子中的分布方式以及處理盒子的可用空間。這與XUL（Firefox瀏覽器的使用者互動語言）相似，其他語言也使用相同的盒模型。如XAML，GladeXML等。通過彈性盒模型，可以輕鬆地建立自適應瀏覽器視窗的流動布局或自適應字型大小的彈性布局。

相容性：彈性盒模型規範是W3C標準化組織於2009年發布的，目前還沒有主流瀏覽器對其進行支援，不過採用Webkit和Mozilla渲染引擎的瀏覽器都自訂了一套私人屬性，用來支援彈性盒模型。

採用Webkit渲染引擎的瀏覽器主要包括Safari和Chrome瀏覽器，該引擎支援以-webkit為首碼的私人屬性。

Mozilla渲染引擎的瀏覽器主要包括Firefox瀏覽器，該引擎支援以-moz為首碼的私人屬性。

相關屬性：

box-align：定義子項目在盒子垂直方向上的空間分配方式
box-direction：定義盒子的顯示順序
box-flex：定義子項目在盒子內的自適應尺寸
box-flex-group：定義自適應子項目群組
box-lines：定義子項目分列顯示
box-ordinal-group:定義子項目在盒子內的顯示位置
box-orient:定義盒子分部的座標軸
box-pack：定義子項目在盒子內水平方向的空間分配方式

box-orient屬性

該屬性可用於定義盒子項目內部的流動布局方向.在使用彈性盒子模型時，需要先把父容器的display屬性設定為box或者inline-box。
文法：

box-orient：horizontal | vertail | inline-axis | block-axis | inherit

取值簡單說明：

horizontal：盒子項目從左至右在一條水平線上顯示它的子項目。

vertail：盒子項目從上到下在一條垂直線上顯示它的子項目。

inline-axis：盒子項目沿著內聯軸顯示它的子項目。

block-axis：盒子項目沿著塊軸顯示它的子項目。

實戰體驗：設計多欄布局

html代碼：

<p id="box">      <p id="box0"><img src="images/web_01.gif" /></p>      <p id="sub-box">          <p id="box1"><img src="images/web_02.gif" /></p>          <p id="box2"><img src="images/web_03.gif" /></p>          <p id="box3"><img src="images/web_04.gif" /></p>      </p>  </p>

CSS3代碼：

<style type="text/css">   body{/*文檔樣式*/      margin:0;padding:0px;/*清除頁面邊界*/      text-align:center;/*文檔置中對齊*/      background:#170843;   }   #box{       margin:auto;/*文檔置中對齊*/      text-align:center;       width:975px;   }   /*定製各個欄目的寬度*/  #box1{width:185px;}   #box2{width:601px;}   #box3{width:189px;}   /*定製子包含框的盒子顯示，其包含的元素水平流動*/  #sub-box{       display:-moz-box;       display:-webkit-box;       display:box;       box-orient:horizontal;       -moz-box-orient:horizontal;       -webkit-box-orient:horizontal;     }   </style>

示範效果：

box-direction屬性

box-direction屬性可以改變盒子項目中內部元素的流動順序，該屬性基本文法：

box-direction：normal | reverse | inherit

取值簡單說明：

normal：正常顯示順序，即如果盒子項目的box-origent屬性值為horizontal，則其包含的子項目按照從左至右的順序顯示，即每個子項目的左邊總是靠近前一個子項目的右邊；如果盒子項目的box-origent屬性值設定為vertical，則其包含的子項目按照從上到下的順序顯示。

reverse：反向顯示，盒子所包含的子項目的顯示順序將於normal相反。

inherit：繼承上階項目的顯示順序。

實戰體驗：反向布局網頁（以上面的案例為基礎）：

CSS3代碼：

<style>   body{       margin:0;padding:0px;       text-align:center;       background:#170843;   }   #box{       margin:auto;       text-align:center;       width:975px;   }   #box1{width:185px;}   #box2{width:601px;}   #box3{width:189px;}   #sub-box{       display:-moz-box;       display:-webkit-box;       display:box;       box-orient:horizontal;       -moz-box-orient:horizontal;       -webkit-box-orient:horizontal;         box-direction:reverse;       -moz-box-direction:reverse;       -webkit-box-direction:reverse;   }   </style>

示範效果：

box-ordinal-group屬性

  box-direction屬性可以改變盒子內部元素的流動順序，而box-ordinal-group屬效能夠設定每個子項目在盒子中的具體顯示位置，文法如下：

box-ordinal-group：<integer>

取值說明：

屬性值是一個自然數，從1 開始，用來設定子項目的位置符號。子項目的分布將根據這個屬性值從小到大進行排列。在預設情況下，子項目將根據元素的位置進行排列。
注意：如果沒有指定box-ordinal-group屬性值的子項目，則其序號預設都為1，並且序號相同的元素將按照他們在文檔中的載入的順序進行排列。

實戰體驗：垂直網頁布局

HTML代碼：

<p id="box">      <p id="box1"><img src="images/web1_01.gif" /></p>      <p id="box2"><img src="images/web1_02.gif" /></p>      <p id="box3"><img src="images/web1_03.gif" /></p>      <p id="box4"><img src="images/web1_04.gif" /></p>  </p>

CSS3代碼：

<style type="text/css">   body {       margin:0;       padding:0;       text-align:center;       background:#d9bfe8;   }   #box {       margin:auto;       text-align:left;       width:988px;   }   /*定義盒形顯示及盒內元素垂直顯示*/  #box {       display : -moz-box;       display : -webkit-box;       display : box;       box-orient:vertical;       -moz-box-orient:vertical;       -webkit-box-orient:vertical;   }   /*根據網頁內容的現實需要，藉助彈性盒模型調整各個板塊的顯示順序*/  #box1 {/*設定第一個元素顯示在第二個位置*/      -moz-box-ordinal-group : 2;/*相容Mozilla Gecko引擎*/      -webkit-box-ordinal-group : 2;/*相容Webkit引擎*/      box-ordinal-group : 2;/*標準用法*/  }   #box2 {/*設定第二個元素顯示在第三個位置*/      -moz-box-ordinal-group : 3;/*相容Mozilla Gecko引擎*/      -webkit-box-ordinal-group : 3;/*相容Webkit引擎*/      box-ordinal-group : 3;/*標準用法*/  }   #box3 {/*設定第三個元素顯示在第一個位置*/      -moz-box-ordinal-group : 1;/*相容Mozilla Gecko引擎*/      -webkit-box-ordinal-group : 1;/*相容Webkit引擎*/      box-ordinal-group : 1;/*標準用法*/  }   #box4 {/*設定第四個元素顯示在第四個位置*/      -moz-box-ordinal-group : 4;/*相容Mozilla Gecko引擎*/      -webkit-box-ordinal-group : 4;/*相容Webkit引擎*/      box-ordinal-group : 4;/*標準用法*/  }   </style>

示範效果

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！