css box-ordinal-group属性怎么用

2024-01-18 10:16 小编
  cssbox-ordinal-group属性是css3中新增属性,是使用来规定box子元素显示的次序,目前主流浏览器都还不支持该属性。但是一些主流浏览器有对应的私有属性来代替该属性,InternetExplorer10支持ms-flex-order属性,InternetExplorer10之前版本不支持弹性盒属性。Firefox内核的浏览器支持-moz-box-ordinal-group属性。Safari和Chrome内核的浏览器支持-webkit-box-ordinal-group属性。
 
  cssbox-ordinal-group属性语法格式
 
  box-ordinal-group:integer;
 
  cssbox-ordinal-group属性值说明
 
  integer:整数,指示子元素的显示次序。值小的元素会显示在值高的元素前面,值相同的元素,显示顺序取决于其源次序
 
  实例
 
  
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="utf-8"/>
 
  <title>css3box-ordinal-group属性设置box子元素的显示顺序</title>
 
  <styletype="text/css">
 
  body{background-color:#aaa;}
 
  div{width:400px;height:200px;border:1pxsolidmediumvioletred;}
 
  .box1{
 
  display:box;/*W3C*/
 
  display:-ms-flexbox;/*InternetExplorer10*/
 
  display:-moz-box;/*Firefox*/
 
  display:-webkit-box;/*Safari,Opera,andChrome*/
 
  }
 
  #p1,#p2,#p3,#p4{width:50px;border:1pxsolidroyalblue;margin-left:6px;}
 
  #p1{
 
  box-ordinal-group:2;
 
  -ms-flex-order:2;/*InternetExplorer10*/
 
  -moz-box-ordinal-group:2;/*Firefox*/
 
  -webkit-box-ordinal-group:2;/*SafariandChrome*/
 
  }
 
  #p4{
 
  box-ordinal-group:1;
 
  -ms-flex-order:1;/*InternetExplorer10*/
 
  -moz-box-ordinal-group:1;/*Firefox*/
 
  -webkit-box-ordinal-group:1;/*SafariandChrome*/
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <divclass="box1"><pid="p1">1</p><pid="p2">2</p><pid="p3">3</p><pid="p4">4</p></div>
 
  </body>
 
  </html>


Tag: 怎么
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码