溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了css中如何使用order屬性，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
css order屬性用于設置或檢索彈性盒模型對象的子元素出現的順序，CSS語法是order: number|initial|inherit。
css order屬性怎么用？
定義和用法
order 屬性設置或檢索彈性盒模型對象的子元素出現的順序。。
注意：如果元素不是彈性盒對象的元素，則 order 屬性不起作用。
默認值：0
繼承：否
可動畫化：是，參見個別的屬性。請參閱 可動畫化（animatable）。
版本：CSS3
JavaScript 語法：
object.style.order="2"
CSS 語法
order: number|initial|inherit;
屬性值
number默認值是 0。規定靈活項目的順序。
initial設置該屬性為它的默認值。請參閱 initial。
inherit從父元素繼承該屬性。請參閱 inherit。
實例
設置彈性盒對象元素的順序：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>#main { width: 400px; height: 150px; border: 1px solid #c3c3c3; display: -webkit-flex; /* Safari */ display: flex;}#main div { width: 70px; height: 70px;}/* Safari 6.1+ */div#myRedDIV {-webkit-order: 2;}div#myBlueDIV {-webkit-order: 4;}div#myGreenDIV {-webkit-order: 3;}div#myPinkDIV {-webkit-order: 1;}/* Standard syntax */div#myRedDIV {order: 2;}div#myBlueDIV {order: 4;}div#myGreenDIV {order: 3;}div#myPinkDIV {order: 1;}</style></head><body><div id="main"> <div style="background-color:coral;" id="myRedDIV"></div> <div style="background-color:lightblue;" id="myBlueDIV"></div> <div style="background-color:lightgreen;" id="myGreenDIV"></div> <div style="background-color:pink;" id="myPinkDIV"></div></div><p><b>注意:</b> Internet Explorer 10 及更早版本瀏覽器不支持 order 屬性。</p><p><b>注意:</b> Safari 6.1 及更新版本通過 -webkit-order 屬性支持該屬性。</p></body></html>上述內容就是css中如何使用order屬性，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
