位置:首頁 > 軟件操作教程 > 編程開發(fā) > CSS > 問題詳情

CSS3 對子級元素的設置 2. order

提問人:劉團圓發(fā)布時間:2020-11-19

    order屬性設置或檢索彈性盒模型對象的子元素出現(xiàn)的順序。

    語法如下:

    order: number|initial|inherit;


    order屬性的值可以是以下幾種:

    ?number:默認值是0,規(guī)定靈活項目的順序

    ?Initial:設置孩屬性為它的默認值。

    Inherit:從父元素繼承該屬性。

    下面通過實例來理解order屬性。

    【例題】使用order屬性

    代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.container{

width: 500px;

height: 500px;

border:5px red solid;

display:flex;

justify-content: space-around;

}

.content{

width: 100px;

height: 100px;

background: lightpink;

color:#fff;

font-size: 50px;

text-align: center;

line-height: 100px;

}

.c1{

order:3;

}

.c2{

background: lightblue;

order:1;

}

.c3{

background: yellowgreen;

order:4;

}

.c4{

background: coral;

order:2;

}

</style>

</head>

<body>

<div>

<div class="content c1">1</div>

<div class="content c2">2</div>

<div class="content c3">3</div>

<div class="content c4">4</div>

</div>

</body>

</html>

image.png

繼續(xù)查找其他問題的答案?

相關(guān)視頻回答
回復(0)
返回頂部