盒子的佈局位置box-ordinal-group屬性詳解
- 云罗郡主轉載
- 2018-10-23 15:39:093244瀏覽
這篇文章帶給大家的內容是關於盒子的佈局位置box-ordinal-group屬性詳解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
我們知道box-direction屬性可以設定彈性盒子內部「子元素」的排列順序。在CSS3彈性盒子模型中，我們也可以使用box-ordinal-group屬性來設定每個「子元素」在彈性盒子中的「準確」顯示位置。
box-ordinal-group屬性取值是一個自然數，從1開始，用來設定子元素的位置序號。子元素的分佈將根據這個屬性值從小到大排列。在預設情況下，子元素將根據元素的位置進行排列。
注意，對於沒有指定box-ordinal-group屬性值的子元素，則該子元素的序號預設都為1。並且序號相同的子元素將按照它們在HTML文件中載入的順序進行排列。
我們先看個例子，再來回顧一下這些知識點：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 box-ordinal-group属性</title>
<style type="text/css">
body
{
display:-webkit-box;
-webkit-box-orient:horizontal; /*定义盒子元素内的元素从左到右流动显示*/
}
div{height:100px;line-height:100px;}
#box1
{
background:red;
-webkit-box-ordinal-group:2;
}
#box2
{
background:blue;
-webkit-box-ordinal-group:3;
}
#box3
{
background:yellow;
-webkit-box-ordinal-group:1;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
<div id="box2">盒子2</div>
<div id="box3">盒子3</div>
</body>
</html>
#以上就是對盒子的佈局位置box-ordinal-group屬性詳解的全部介紹，如果您想了解更多有關CSS3影片教學，請關注PHP中文網。
以上是盒子的佈局位置box-ordinal-group屬性詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：lvyestudy.com。如有侵權，請聯絡admin@php.cn刪除