css盒模型

在CSS中，使用標準盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內容。每個盒子有四個邊：外邊距邊, 邊框邊, 內填充邊 與 內容邊。

content-box

默認值，標準盒子模型。 width
與 height
只包括內容的寬和高， 不包括邊框（border），內邊距（padding），外邊距（margin）。

border-box（ie盒模型）

width
和 height
屬性包括內容，內邊距和邊框，但不包括外邊距。這是當文檔處于 Quirks模式 時Internet Explorer使用的盒模型。

background-box

元素的background范圍覆蓋了content, padding和border，但不包括margin.

外邊距合并（外邊距塌陷）

發生margin合并的三種基本情況:

• 相鄰的兄弟姐妹元素

• 塊級父元素與其第一個/最后一個子元素
  如果塊級父元素中，不存在上邊框
  、上內邊距
  、內聯元素、清除浮動
  這四條屬性（也可以說，當上邊框寬度及上內邊距距離為0時），那么這個塊級元素和其第一個子元素的上邊距就可以說”挨到了一起“。此時這個塊級父元素和其第一個子元素就會發生上外邊距合并現象，換句話說，此時這個父元素對外展現出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者。

• 空塊元素（僅設置margin元素）

解決方法

• 在父層div加上：overflow:hidden；
• 把margin-top外邊距改成padding-top內邊距;

關于讓一個未知寬高的img在一個div中居中的問題

這是兼容ie8的解決方法

<!-- HTML結構 -->
<div>![](...)<span>here are test words</span></div>
<!-- 樣式如下 -->
<style>
  img {
    vertical-align: middle;
  }
  div:before {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
  }
  span {
    vertical-align: middle;
  }
</style>

• display:inline-block
  將圖片既具有block的寬度高度特性又具有inline的同行特性。
  這里的img與一個height:100% 的span同行，使這一行的行高撐滿div。

• vertical-align: middle;
  讓行內元素垂直居中。

• text-align: center;
  頁面內居中對齊，因為水平上有寬度的只有圖片，所以圖片水平也居中了。

• 關于為什么〈span〉也要加vertical-align：
  因為你如果不給span設置屬性，css會給span一個默認屬性：vertical-align:baseline;也就是span底部對齊父元素的基線（baseline），你在span里打個字就看出來了，基線被自動畫在div的底部的話，<img>就跟著依據這條基線為軸垂直居中了。

如果不用兼容呢

• 方法一：絕對定位

  #container{
      position:relative;
  }
  
  #center{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
 }

• 方法二：flex布局

 #container{
     display:flex;
     // display: -webkit-flex; Safari需要使用特定的瀏覽器前綴
     justify-content:center;
     align-items: center;
 }

 #center{
 }