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。