css盒模型的一些知識

垂直居中指南

在容器裏讓內容居中最好的方式是根據特定場景考慮不一樣因素。作出判斷前，先逐個詢問本身如下幾個問題，直到找到合適的解決辦法。

1. 能夠用一個天然高度的容器嗎？給容器加上相等的上下內邊距讓內容居中。
2. 容器須要指定高度或者避免使用內邊距嗎？對容器使用display: table-cell和vertical-align: middle。
3.  能夠用Flexbox嗎？ 若是不須要支持IE9，能夠用Flexbox居中內容。
4. 容器裏面的內容只有一行文字嗎？設置一個大的行高，讓它等於理想的容器高度。這樣會讓容器高度擴展到可以容納行高。若是內容不是行內元素，能夠設置爲inline-block。
5. 容器和內容的高度都知道嗎？將內容絕對定位。（只有當前面提到的方法都無效時才推薦這種方式。）
6. 不知道內部元素的高度？用絕對定位結合變形（transform）。（仍是隻有當前面提到的方法都無效時才推薦該方法。）
7. 還不肯定的話，參考howtocenterincss網站。這個網站很不錯，能夠根據本身的場景填寫幾個選項，而後它會相應地生成垂直居中的代碼

負外邊距

	左負邊距	右負邊距	上負邊距	下負邊距
未指定width的塊狀元素	width擴大	width擴大	向上移動，與它上面的元素重疊	將它下面的元素拉過來
指定width的塊狀元素	向左移動	沒有做用	向上移動，與它上面的元素重疊	將它下面的元素拉過來
未指定width的內聯元素	向左移動，與它左邊的元素重疊	將它右邊的元素拉過來	向上移動，與它上面的元素重疊	將它下面的元素拉過來
指定width的內聯元素	向左移動，與它左邊的元素重疊	將它右邊的元素拉過來	向上移動，與它上面的元素重疊	將它下面的元素拉過來

負外邊距並不經常使用，可是在某些場景下很實用，尤爲是當建立列布局的時候。不過應當避免頻繁使用，否則網頁的樣式就會失控。

外邊距摺疊

1. 當頂部和/或底部的外邊距相鄰時，就會重疊，產生單個外邊距。
2. 只有上下外邊距會產生摺疊，左右外邊距不會摺疊。
3. 彈性子元素的外邊距不會摺疊

防止外邊距摺疊:

1. 對容器使用overflow: auto（或者非visible的值），防止內部元素的外邊距跟容器外部的外邊距摺疊。這種方式反作用最小。
2. 在兩個外邊距之間加上邊框或者內邊距，防止它們摺疊。
3. 若是容器爲浮動元素、內聯塊、絕對定位或固定定位時，外邊距不會在它外面摺疊。
4. 當使用Flexbox佈局時，彈性佈局內的元素之間不會發生外邊距摺疊。網格佈局（grid佈局）同理。

一些注意點

1. 百分比參考的是元素容器塊的大小，可是容器的高度一般是由子元素的高度決定的。這樣會形成死循環，瀏覽器處理不了，所以它會忽略這個聲明。要想讓百分比高度生效，必須給父元素明肯定義一個高度。
2. vertical-align聲明只會影響行內元素或者table-cell元素。對於行內元素，它控制着該元素跟同一行內其餘元素之間的對齊關係。對於顯示爲table-cell的元素，vertical-align控制了內容在單元格內的對齊。