border-box——一種改變盒子尺寸的方法

 

語法：

 

box-sizing:content-box|border-box|padding-box

 

 

IE6中的傳統盒子模型： CSS樣式聲明的 width 和 hieght 包含 content、padding 和 border。這就是 border-box 盒子模型。

W3C 的盒子模型是   content-box，即CSS樣式聲明的高度和寬度是 content 的尺寸。

padding-box 盒子樣式聲明中的高度是和寬度是 paddin和content的寬度和高度。

如何用好他們？

W3C的盒子是反自覺的，也就說我們把一樣東西放到一個盒子里，再把盒子放到倉庫里，東西占的尺寸是盒子的尺寸，而不是東西的尺寸。border-box 不反自覺。很多現代框架如 bootstrap 就是這么處理的。

流式布局和border-box：
這個屬性廣泛用於流式布局，尤其是以百分數為基礎的布局。想象一個場景：導航欄 有5個項目，每個項目占 20% 的寬度，加上一條用於分割他們的固定尺寸的邊框，

nav li{
width:20%；
display:inline-block;
border-left:0.25em solid #fff;
}

 

那個第五個項目將換行。為了避免它換行，我們告訴瀏覽器用 border-box 去計算盒子寬度。

nav li {
box-sizing:border-box;
width:20%；
display:inline-block;
border-left:0.25em solid #fff;
}

點擊看demo 

用 border-box 統一表單控件的尺寸

不同瀏覽器對表單控件的處理有的用 content-box，有的用 border-box，如input type="sumbmit"  VS  select。用 border-box 就統一處理了。

padding-box 很不常見，只有FF支持。

參考文文章：CSS3 Box Sizing – a Way of Calculating the Size of a Box