盒模型

標準盒模型：
因為 width = margin_box_width(left_width + right_width) + border_width + padding_box_width(left_width + right_width) + content_box_width，所以，同樣寬度的內容因為margin和padding值不一樣，撐開了內容塊的寬度，顯示出來的效果不盡相同。為瞭解決這個問題，IE8+可以用設置box-sizing：border-box來避免內容塊的寬度被撐開。因此，一般可以進行如下設置，使content_box_width = width 。

*{
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            box-sizing:border-box;
        }

彈性盒模型：
彈性佈局相比傳統的塊佈局要簡潔很多，但是實現原理差別挺大的。首先，要想進行彈性佈局，要設置display:flex，確定彈性容器。然後要知道彈性容器裡面的內容塊定位是由兩條軸即主軸和測軸確定的。主軸由flex-direction屬性值確定是橫向還是縱向，justify-content屬性則確定內容塊在主軸上的分佈形式。內容塊在測軸上的分佈形式由align-item確定，也可以用align-self確定單個的內容塊分佈形式，不過這會覆蓋掉align-item的值。目前彈性盒佈局還沒有完全普及，PC端瀏覽器支持還不是很好，更多的是用於手機端的佈局。