全国服务热线:4008-888-888

技术知识

详解css display:box 新特性

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 新特性,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服