CSS兩大盒模型的區別

CSS中Box model分爲兩種，第一種是W3C的標準盒模型，另一種是IE的盒模型。

1、content-box傳統盒模型

content-box 是W3C的標準盒模型模型，範圍包括 margin、border、padding、content,並且 content 部分不包含border和padding。

例如：首先設置一個寬和高都爲100px的盒子

div {
            height: 100px;
            width: 100px;
            background-color: pink;
        }

現在給盒子加上一個10px的padding值：

div {
            height: 100px;
            width: 100px;
            background-color: pink;
            padding: 10px;
        }

由此可知，傳統盒模型的padding會撐大盒子。
再給盒子設置一個5px的border：

div {
            height: 100px;
            width: 100px;
            background-color: pink;
            padding: 10px;
            border: 5px solid crimson;
        }

可見，傳統盒模型的border也會撐大盒子
這種撐大盒子的特性會在實際開發中帶給我們很多困難，例如我們已經利用浮動或定位排列好了許多模塊，現在只需要各個模塊的間距大一點，如果用傳統盒模型的border或者padding，就會破壞我們之前設置好的佈局。這就要用到下邊的一種盒模型。

2、border-box盒模型

IE 盒子模型的 content 部分包含了border 和 padding，其內容真正的寬度是(width-padding-boder)；

css3中定義了box-sizing屬性，可通過此屬性來設置是W3C傳統盒模型還是IE 盒模型

使用方法如下：

box-sizing: content-box（默認） || border-box;

例子還是上邊的100*100的盒子，這次把盒子設置成border-box：

div {
            box-sizing: border-box;
            height: 100px;
            width: 100px;
            background-color: pink;
        }

然後再次給盒子設置10px的padding：

 div {
            box-sizing: border-box;
            height: 100px;
            width: 100px;
            background-color: pink;
            padding: 10px;
        }

由此可見，設置padding盒子不會變大，會使內容區域變小。

再次設置5px的border：

 div {
            box-sizing: border-box;
            height: 100px;
            width: 100px;
            background-color: pink;
            padding: 10px;
            border: 5px solid crimson;
        }

可見，border也不會撐大盒子，也是往裏使內容變小。這種盒子模型就很好的解決了佈局中“撐大”盒子的問題。

總結

作爲一個前端開發人員來說，“IE”兩個字無疑是讓人頭大的（沒錯，就是它調不完的兼容性問題）。但是IE提出的border-box盒模型卻給開發人員提供了極大的便利性。在實際開發過程中，border-box盒模型的使用比例會比傳統的content-box高很多，所以要熟練掌握兩種盒模型的使用技巧和特點。尤其是border-box。