*新闻详情页*/>
1、display:box;
在元素上设定该特性,可以使其子代排序在同1水平上,相近display:inline-block;。
2、可在其子代设定以下特性
前提条件:应用以下特性,务必在父代设定display:box;
1.box-flex:number;
1)占父级元素宽度的number份
2)若子元素设定固定不动宽度,则该子元素运用固定不动宽度,别的未设定固定不动宽度的字元素将余下的父级宽度(父级-已设定固定不动宽度的子代元素的总宽度按 number占份数
3)若子元素有margin值,则按余下(父级宽度-子代固定不动总宽度-总margin值)宽度占number份
2.box-orient:horizontal/vertical
在父级上设定该特性,则子代按水平排序或垂直排序。
注:全部流行访问器不适用该特性,务必再加前缀。
1)horizontal 水平排序,子代总width=父级width。若父级固定不动宽度,则子代设定的width失效,子代会撑满父级宽度。
2)vertical 竖直排序,子代总height=父级height。若父级固定不动高宽比,则子代设定的height失效,子代会撑满父级高宽比。
3.box-direction:normal/reverse
在父级上设定该特性,确定子代的排序次序。
1)normal 默认设置值,子代按html次序排序
2)reverse 反序
4.box-align:start/end/center/stretch
在父级设定,子代的竖直对齐方法。
1)start 竖直顶部对齐
2)end 竖直底部对齐
3)center 竖直垂直居中对齐
4)stretch 拉伸子代的高宽比,与父级设定的高宽比1致。子代height失效。
5.box-pack:start/end/center
在父级设定,子代的水平对齐方法。
1)start 水平左对齐
2)end 水平右对齐
3)center 水平垂直居中对齐
总结
以上所述是网编给大伙儿详细介绍的css display:box 新特性,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
Copyright © 2002-2020 小程序如何制作_预约小程序_微信小程序怎么做_微信抽奖小程序_小程序外包 版权所有 (网站地图) 粤ICP备10235580号