盒模型

1. 標準盒模型：
   由於 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; }

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