css的兩種盒模型

我先對兩種盒模型做個介紹。

W3C的標準盒模型

在標準的盒子模型中，width指content部分的寬度

IE的盒模型

在IE盒子模型中，width表示content+padding+border這三個部分的寬度

我們可以看出我們上面的使用的預設正是W3C標準盒模型
而這裡盒模型的選取更傾向於專案和開發者的習慣，並沒有絕對的好壞之分。
 

box-sizing的使用

如果想要切換盒模型也很簡單，這裡需要藉助css3的box-sizing屬性
 

  box-sizing: content-box 是W3C盒子模型
  box-sizing: border-box

是IE盒子模型

box-sizing的預設屬性是content-box

CSS3中可以通過box-sizing 來指定盒模型，即可指定為content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。

可以分成兩種情況：

1、box-sizing: border-box 盒子大小為 width

2、box-sizing: content-box 盒子大小為 width + padding + border

注：上面的標註的width指的是CSS屬性裡設定的width: length，content的值是會自動調整的。

div {
  width: 100px;
  height: 100px;
  background: skyblue;
  margin: 0 auto;
  border: 1px solid gray;
​
  /* 
  預設的設定 如果我們添加了 border屬性 該容器的大小會發生改變
  因為他要優先保證內部的內容所佔區域 不變
  */
​
  /*  
  box-sizing  如果不設定 預設的值 就是 
  content-box: 優先保證內容的大小 對盒子進行縮放;
  border-box: 讓 盒子 優先保證自己所佔區域的大小,對內容進行壓縮;
  */
  box-sizing: border-box;
}