Kai

790***[email protected]

content-box 和border-box 描述的太抽象了，這樣更不好理解。

直觀通俗的解釋是：

content-box：指定盒模型為 W3C 標準模型，設定 border、padding 會增加元素 width與 height 的尺寸，即 border 與 padding 相當於是元素的“殖民地”，元素的“土地”、尺寸會增加，為向外延伸。

border-box：指定盒模型為 IE模型（怪異模式），設定 border、padding 不會影響元素 width 與 height 的尺寸，即 border 與 padding 由元素已設空間轉變。即空間還是這個空間，只是將部分空餘的地方，轉變成了其他空間用法而已，為內部轉變。

設定border與padding與被影響屬性值的關係公式：

W3C標準盒模型（conten-box值）【width/height被改變，擴充套件】
width = content + border + padding;

// 其中，width 為瀏覽器視窗呈現尺寸，content 為在CSS中設定的元素的 width;

IE怪異盒模型（border-box值）【content被改變，壓縮】
content = width - border - padding;

// 其中，width 為在CSS中設定的元素的width;


具體可用瀏覽器除錯看看，多觀察觀察就懂了。

總之：

1.W3C標準盒模型（content-box），border、padding 的設定會破壞元素寬高，必須得重新計算，非常麻煩（除了在IE瀏覽器，預設就是標準盒模型，所以可以用 box-sizing 來轉換）；

2.IE（怪異）盒模型（border-box），border、padding 的設定不會影響元素的寬高，這非常實用（且因為IE盒模型不是標準，所以才有 box-sizing 這個標準屬性來設定，將它標準化）【IE6/5 是怪異模型，IE7開始是標準盒模型】

另外的小技巧：【行高的計算】

/* 預設, W3C標準盒模型、 box-sizing: content-box */
<style type="text/css">
    .box {
      width: 200px;
      height: 200px;
      text-align: center;
      border: 10px solid black;
      padding: 15px;
    }
</style>
/* 此時的行高：line-height = height = 200px;*/
/* 【因為行高即內容的高，而內容在這裡即元素的高（邊框和填充是擴充套件外部空間的）】 */

/* - - - - - - 分割線 - - - - - - */

/* IE怪異盒模型、box-sizing: border-box; */
<style type="text/css">
    .box {
      width: 200px;
      height: 200px;
      text-align: center;
      border: 10px solid black;
      padding: 15px;
      box-sizing: border-box;
    }
</style>
/* 此時的行高：line-height = height - border*2 - padding*2 = 200px - 10px*2 - 15px*2 = 150px; */
/* 【因為此時，內容的其餘空間被邊框和填充佔用，所以是元素的高減去邊框和填充的空間，剩餘即為內容空間】 */