display:box和display:inline-box的区别

display:box我想大家很熟悉，那么display:inline-box呢，今天在项目中需要设置这样的属性box-align：center,那么就想到用 display:box;如果设置BOX，那么宽度不能自适应，必须设置一个值，我找了一下，终于找到一个属性可以宽度自适应高度定死的弹性伸缩盒的属性display:inline-box，CSS如下写

.dafeiNotice_time {
    padding:0 0.12rem;
    background:rgba(0,0,0,0.15);
    border-radius: 0.1rem;
    text-align: center;
    color: #fff;
    font-size: 0.26rem;
    height:0.38rem;
    display:-moz-inline-box;/* Firefox */
    display:-webkit-inline-box; /* Safari, Chrome, and Opera */
    display:inline-box;/* W3C */
    -moz-box-align:center;
    -webkit-box-align:center;
    box-align:center;   
}

那么来说一说display 几个属性：

display:block                 将对象变成宽度和高度都可以设置的块元素

display:inline-block        将对象变成高度定死，宽度自适应的行内块元素

display:display:box        将对象作为弹性伸缩盒显示，同样继承block属性。（伸缩盒最老版本）

display:inline-box：        将对象作为内联块级弹性伸缩盒显示，同样继承inline-block属性。（伸缩盒最老版本）

display:flexbox               将对象作为弹性伸缩盒显示，同样继承block属性。（伸缩盒过渡版本）

display:inline-flexbox      将对象作为内联块级弹性伸缩盒显示，同样继承inline-block属性。（伸缩盒过渡版本）

display:flex                    将对象作为弹性伸缩盒显示，同样继承block属性。（伸缩盒最新版本）

display:inline-flex           将对象作为内联块级弹性伸缩盒显示，同样继承inline-block属性。（伸缩盒最新版本）