css box-ordinal-group属性如何用
发布时间:09/01 来源:未知 浏览:
关键词:
css box-ordinal-group属性是css3中新增属性,是使用来规定box子元素显示的次序,当前主流阅读器都还不支撑该属性。但是一些主流阅读器有对应的私有属性来代替该属性,Internet Explorer 10支撑ms-flex-order属性,Internet Explorer 10此前版本不支撑弹性盒属性。Firefox内核的阅读器支撑-moz-box-ordinal-group属性。Safari和Chrome内核的阅读器支撑-webkit-box-ordinal-group属性。
css box-ordinal-group属性语法格局
box-ordinal-group: integer;
css box-ordinal-group属性值说明
integer:整数,指示子元素的显示次序。值小的元素会显示在值高的元素前面,值雷同的元素,显示次序取决于其源次序
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css3 box-ordinal-group属性设定box子元素的显示次序</title> <style type="text/css"> body{background-color: #aaa;} div{width: 400px;height: 200px;border:1px solid mediumvioletred;} .box1{ display:box;/* W3C */ display:-ms-flexbox;/* Internet Explorer 10 */ display:-moz-box;/* Firefox */ display:-webkit-box;/* Safari, Opera, and Chrome */ } #p1,#p2,#p3,#p4{width:50px;border:1px solid royalblue;margin-left:6px;} #p1{ box-ordinal-group:2; -ms-flex-order:2; /* Internet Explorer 10 */ -moz-box-ordinal-group:2; /* Firefox */ -webkit-box-ordinal-group:2; /* Safari and Chrome */ } #p4{ box-ordinal-group:1; -ms-flex-order:1; /* Internet Explorer 10 */ -moz-box-ordinal-group:1; /* Firefox */ -webkit-box-ordinal-group:1; /* Safari and Chrome */ } </style> </head> <body> <div class="box1"><p id="p1">1</p><p id="p2">2</p><p id="p3">3</p><p id="p4">4</p></div> </body> </html>
运转结果
以上就是css box-ordinal-group属性如何用的具体内容,更多请关注百分百源码网其它相关文章!