CSS Box Model

CSS 中有個重要的概念，就是盒子模式 (Box model)主要是用來設計和佈局時使用.  而盒子模型有兩種詮釋方式分別是W3C标准模型 和 IE6的模型。

先看看下面的圖

IE模型

 W3C標準模型

• Margin（外邊距） - 清除邊框區域。 Margin沒有背景顏色，它是完全透明
• Border（邊框） - 邊框周圍的填充和內容。邊框是受到盒子的背景顏色影響
• Padding（內邊距） - 清除內容周圍的區域。會受到框中填充的背景顏色影響
• Content（內容） - 盒子的內容，顯示圖檔和字

從上面兩張圖中可以看到標準模型和IE模型的差別

• 標準模型：盒子模型的總寬度在設定width的會分別被padding 和 border影響
• IE模型：盒子模型的總寬度在設定width的不會被padding 和 border影響

例子： 我們需要設定總寬度為300px的div

在標準模式下設定的時候如果注意如果有設定 padding和 border 都會影響總寬度

div {  
    width:250px;  
    padding:15px;  
    border:10px solid gray;  
} 

300px = 250px+ 30px (padding 左右15px) + 20px(border 左右10px)

在IE模式下寬度的計算方法如下,不會因為設定padding 和 border而影響width 所設定的寬度

div {  
    width:300px;  
    padding:15px;  
    border:10px solid gray;  
} 

300px  =  300px

如果在標準模式下的瀏覽器每次設定寬度的時候都要計算，其實是很麻煩的事情所以在CSS3 提供一個box-sizing 的屬性， 可以讓我們設定成使用IE模型的計算方式。

*{
 box-sizing: border-box; 
 -moz-box-sizing: border-box;  /*Mozila Fox*/
 -webkit-box-sizing: border-box; /*Chrome */
}

有時候為了兼容較舊版本的瀏覽器的時候，且該屬性還沒制訂為標準但各家的瀏覽器已經加入支持就會需要到前綴詞來提前支援新屬性如上面的範例 -moz是火狐webkit 是Safati,Chrome