[06] 盒模型 + auto 居中 + 垂直合併

1.盒模型

盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。

  

　　標準（W3C）模型中：CSS中的寬（width） = 內容 （content）的寬

CSS中的寬（width） = 內容（content）的寬+（border+padding）*2

結論：IE盒模型是陳舊知識點，除了幫助理解css3 box-sizing: border-box（等分寬度佈局）外沒什麼用。不加文檔聲明的狀況下，只有特別舊的低版本IE瀏覽器（測試IE8瀏覽器IE7-模式）才以IE盒子模型渲染，其餘瀏覽都是標準模式。

結論引用：http://www.cnblogs.com/wenhandi/p/7778757.html

2.auto使用

auto在盒模型中，只能用於：margin-left, with, margin-righ. margin-top , height, margin-bottom

2.1 水平：margin-left, with, margin-righ. 

a.所有設置爲auto,通常默認爲0

b.margin-left,margin-right爲auto, with爲父容器寬度並居中

c.with具體寬度，margin-left 具體寬度，margin-right爲auto,這爲auto的寬度爲： 父容器with  - 元素with - 元素margin-left = 元素margin-right 

2.2 垂直： margin-top , height, margin-bottom

a.設置爲auto,通常默認爲0

b.height:沒有設置時，高度 = 內容的高度。

2.3 替換元素auto

img這種圖片元素，當設置height or with 爲auto時，會根據 heigth = 圖片實際高度。

3.合併垂直外邊距

當對li元素設置了margin-top, margin-bottom時，咱們指望的是li元素之間相隔25px.可是實際爲15px.取值爲合併內容最大的那個值。

//css
ul li{
    margin-top: 10px;
    margin-bottom: 15px;
}
//html
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

 負外邊距：

a.若是合併的外邊距全爲負值，取絕對值最大的

b.一正一負： 正數 - 負外邊距絕對值

// css: 兩個負值：-18，-15取值-18.和正值相減：20-（|-18|） =2.最終只有2像素
ul li{
	margin-bottom: 20px;
	background: red;
}
ul {
    margin-top: -15px;
    background: blue;
}
h1 {
    margin-top: -18px;
    background: black;
}
//html
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<h1>dfdfdf</h1>

結果：