關於發展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：horizo​​ntal | vertail | inline-axis | block-axis | inherit

取值簡單說明：

horizo​​ntal：盒子元素從左到右在一條水平線上顯示它的子元素。

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屬性值為horizo​​ntal，則其包含的子元素依照從左到右的順序顯示，即每個子元素的左邊總是靠近前一個子元素的右邊；如果盒子元素的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：979e7f42ea08258251c39ffe96b911f2

取值說明：

屬性值是自然數，從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>

示範效果

#####以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！ ######相關推薦：#########使用CSS3實現超酷的黑貓警長首頁###############利用CSS實現純英文數字自動換行#########

以上是關於發展CSS3彈性盒模型的方法之一的詳細內容。更多資訊請關注PHP中文網其他相關文章！