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屬性。（伸縮盒最新版本）