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