CSS3布局-靈活的盒子模型

2020-03-24 17:57:49

字體：大中小

來源：轉載

供稿：網友

CSS3為前端設計人員提供了很大的方便，在CSS2的基礎上它也增加了一些新的盒子模型參數，我們將能更靈活地調整頁面上各個容器的大小和位置，對建立自適應布局的頁面帶來很大的好處。通過學習和測試，可以發現這種新的盒子模型布局對建立自適應布局的頁面帶來很大的好處。本文將介紹CSS3布局:靈活的盒子模型，文中所有例子都基于以下HTML代碼： body dividdivid=”box1″ 1 /div dividdivid=”box2″ 2 /div dividdivid=”box3″ 3 /div /body 容器的排列在通常的情況下，頁面上所有容器的順序都按照載入的順序排列。而使用CSS3提供的功能后，我們可以在不改變HTML結構的前提下隨意改變容器顯示的位置，這樣不但給排版帶來極大的方便，我們也可以利用這些功能進行流量整形。在需用使用靈活盒子模型(FlexibleBoxModule)的時候，我們需要先把其父容器的Display屬性設置為box或者inline-box。水平分布和垂直分布我們可以通過box-orient屬性指定容器的分布軸，當這個屬性的值為vertical時其子容器將垂直分布(也可以為block- axis)，當值為horizontal時其子容器講水平分布(也可以為inline-axis)。在本文的第一個例子里我們使用以下的CSS：#exemple1.content{
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
box-orient:horizontal;
}
#exemple1.boite{
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}具體的效果可以看這個DEMO，三個子Div容器都橫向并列了。注：這個效果在CSS2里理論上也可以通過Display:inline;實現，但由于某些瀏覽器的BUG，沒人會這樣做。反序排列box-direction屬性可以讓我們隨意改變容器的顯示順序。我們知道，在默認的情況下，block級元素是按照加載順序從上到下排列，inline級元素是從左到右排列的，但現在通過box-direction屬性我們可以讓最后加載的block級元素顯示在最頂部，最后加載的 inline級元素顯示在左邊。但在使用這個屬性的時候要注意它可能會改變元素的某些屬性，產生一些不能控制的效果。在第二個例子里，我們使用以下的CSS：#exemple2.content{
-moz-box-orient:vertical;
-moz-box-direction:reverse;
-webkit-box-orient:vertical;
-webkit-box-direction:reverse;
box-orient:vertical;
box-direction:reverse;
}
#exemple2.boite{
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;}我們不但可以讓一組同級容器反序排列，而且還可以讓它們按自己喜歡的順序排列，box-ordinal-group屬性可以幫我們做到這一點。通過box-ordinal-group為各個容器指定一個序號，默認情況下他們將會按照序號遞增的順序排列。要注意的是：沒有指定序號的容器默認都為 1，并且序號相同的元素將按照加載順序排列。大家可以看一下下面的CSS：#exemple3.content{
-moz-box-orient:vertical;
-moz-box-direction:reverse;
-webkit-box-orient:vertical;
-webkit-box-direction:reverse;
box-orient:vertical;
box-direction:reverse;
}
#exemple3.boite{
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
#exemple3.v1{
-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;
box-ordinal-group:2;
}
#exemple3.v2{
-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;
box-ordinal-group:2;
}
#exemple3.v3{
-moz-box-ordinal-group:1;
-webkit-box-ordinal-group:1;
box-ordinal-group:1;
}效果大家可以看這個DEMO。可以發現，在不改變HTML結構的情況下，容器的排列順序改變了。
按指定順序排列在上面的CSS里，我把第一和第二個容器的序號都定為2，第三個容器序號為1，因此最終效果應該是v3排在第一，v1和v2則根據加載順序，v1排在v2前面。效果可以看這個DEMO。后記CSS3真的非常強大，我相信在它普及以后，我們做網頁的時候將可以減少大量的JavaScript
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS基礎：了解閉合浮動元素

下一篇：利用HTML、CSS 實現帶表情的評論框的制作教程