css3:order随意给子元素排序
七娃博客602人阅读
前景:你有没有在布局子元素的时候,想pc和wap不一样,有的子元素需要向前排序,用float有时候不方便,中间还夹杂着其它子元素,定位也会麻烦,需要写一堆兼容css,那么你可以试试order这个属性
1.属性定义
order: 设置或检索弹性盒模型对象的子元素出现的順序,就是给子元素排序,前提是父级盒子为弹性布局flex或网格布局grid,官方还提到绝对定位中也可以用。网格和弹性盒子中,我测试成功,但是绝对定位没试过。
2.参数可用值
order: number|initial|inherit;
- number:数字为任意整数值,从-1开始
- initial:默认值为0
- inherit:继承父级
3.案例实战
<style type="text/css"> .box{width: 100px;height: 100px;} .div{display: flex;} .bg0{background: #111;}.bg1{background: #444;}.bg2{background: #777;}.bg3{background: #999;} .o1{order:-1;}.o2{order:0;}.o3{order:1;}.o4{order:2;} </style> <div class="div"> <div class="box bg0">1</div> <div class="box bg1">2</div> <div class="box bg2">3</div> <div class="box bg3">4</div> </div> <div class="div po" > <div class="box bg0 o4">1</div> <div class="box bg1 o2">2</div> <div class="box bg2 o3">3</div> <div class="box bg3 o1">4</div> </div>
效果:
4.浏览器兼容
order是css3新增的属性,大多数现代浏览器都支持,不支持css3的浏览器也不会兼容,IE10一下不要尝试。
相关推荐:css3过渡transition笔记
评论 | 0 条评论
登录之后才可留言,前往登录