CSS盒模型

一、什麼是盒模型

---

每個元素都看成一個盒子，盒子模型是由content（內容）、padding（內邊距）、margin（外邊距）和  
border（邊框）這四個屬性組成的。  

二、盒模型的分類

---

盒模型有標準盒子模型和IE盒子模型 

（一）標準盒子模型

元素的width=content的寬度  

設置方式：box-sizing:content-box

（二）IE盒子模型

元素的width=content + padding +border   

設置方式：box-sizing:border-box

三、JS怎麼獲取和設置box的寬高

---

更多獲取方式見這裏

• clientWidth和clientHeight

  這組屬性可以獲取元素可視區的大小，可以得到元素內容及內邊距所佔據的空間大小。返回了元素 
  大小，但沒有單位，默認單位是px   。對於元素的實際大小，clientWidth和clientHeight
  理解方式如下：
  

  a. 增加邊框，無變化；
  b. 增加外邊距，無變化；
  c. 增加滾動條，最終值等於原本大小減去滾動條的大小；
  d. 增加內邊距，最終值等於原本大小加上內邊距的大小；

<div id="test"></div>
#test{
    background-color: green;
    width: 200px;
    height: 200px;
    border: solid 5px red;  /* 對應a理解，結果：200,200 */
    margin: 10px;  /* 對應b理解，結果：200,200*/
    padding: 20px;  /* 對應c理解，結果：240,240*/
    overflow: scroll;  /* 對應d理解，結果：223,223，223=200（css大小）+40（兩邊內邊距）-17（滾動條寬度）*/
}
window.onload = function(){
    var obj = document.getElementById("test");
    alert(obj.clientWidth + "," + obj.clientHeight);
};

• scrollWidth和scrollHeight

   這組屬性可以獲取滾動內容(可見內容)的元素大小。返回了元素大小，默認單位是px  對於元素   
   的實際大小，scrollWidth和scrollHeight理解如下:  
  

  1. 增加邊框，不同瀏覽器有不同解釋（下面在IE8中運行正常，IE6運行不正常）：
     a) Firefox和Opera瀏覽器會增加邊框的大小，220x220
     b) IE、Chrome和Safari瀏覽器會忽略邊框大小，200x200
     c) IE瀏覽器只顯示它本來內容的高度，200x18（IE8已經修改該問題）

1. 增加內邊距，最終值會等於原本大小加上內邊距大小，220x220，IE爲220x38
2. 增加滾動條，最終值會等於原本大小減去滾動條大小，184x184，IE爲184x18
3. 增加外邊據，無變化。
4. 增加內容溢出，Firefox、Chrome和IE獲取實際內容高度，Opera比前三個瀏覽器獲取的高度偏小，Safari比前三個瀏覽器獲取的高度偏大。

• offsetWidth和offsetHeight

  這組屬性可以返回元素實際大小，包含邊框、內邊距和滾動條。返回了元素大小，默認單位是px。   
  對於元素的實際大小，offsetWidth和offsetHeight理解如下：
  

  1.增加邊框，最終值會等於原本大小加上邊框大小，爲220；
  2.增加內邊距，最終值會等於原本大小加上內邊距大小，爲220；
  3.增加外邊據，無變化；
  4.增加滾動條，無變化，不會減小；

<div id="test">test div element</div>
#test{
    background-color: green;
    width: 200px;
    height: 200px;
    border: solid 10px red; /*結果：220,220*/
    margin: 10px; /*結果：220,220（無變化）*/
    padding: 10px; /*結果：240,240*/
    overflow：scroll; /*結果：240,240（無變化）*/
}
window.onload = function(){
    var obj = document.getElementById("test");
    alert(obj.offsetWidth + "," + obj.offsetHeight);
};

四、邊距重疊

---

指的是毗鄰的兩個或多個外邊距 (margin) 在垂直方向會合併成一個外邊距。  

摺疊產生的情況

1.必須是處於常規文檔流（非float和絕對定位）的塊級盒子,並且處於同一個BFC當中。
2.沒有線盒，沒有空隙，沒有padding和border將他們分隔開(ps :所以解決辦法中有padding或者border兩種辦法)
3.都屬於垂直方向上相鄰的外邊距，可以是下面任意一種情況

1.元素的margin-top與其第一個常規文檔流的子元素的margin-top
2.元素的margin-bottom與其下一個常規文檔流的兄弟元素的margin-top
3.height爲auto的元素的margin-bottom與其最後一個常規文檔流的子元素的margin-bottom
4.高度爲0並且最小高度也爲0，不包含常規文檔流的子元素，並且自身沒有建立新的BFC的元素的margin-top和margin-bottom

取值規則

1） 都是正數： 取最大值
距離=Math.max(margin-botton,margin-top)
2） 都是負數： 取最小值
距離=Math.min(margin-botton,margin-top)
3）上面是正數，下面是負數或者 上面是負數，下面是正數： 正負相加
距離=margin-botton+margin-top

解決方法

1.在父層div加上：overflow:hidden；
2.把margin-top外邊距改成padding-top內邊距;
3.父元素產生邊距重疊的邊有不爲 0 的 padding 或寬度不爲 0 且 style 不爲 none 的 border，父層div加：padding-top: 1px,或者 border-top:1px ;
4.設置父元素或子元素浮動（left/right）
5.設置父元素dispaly:inline-block或者display:table-cell;
6.給父元素加上絕對定位
也就是讓它不在滿足外邊距坍塌所需條件或者處罰BFC來解決外邊距坍塌問題