box-sizing屬性是用來聲明元素的width跟height包含box model的哪些部位。

適用元素：

所有可設定width跟height的元素。

value(參數)：

content-box | border-box

該屬性還有一個參數是padding-box，但目前幾乎所有的瀏覽器不支援padding-box，而border-box大多數的瀏覽器是支援的。content-box是預設值，所以瀏覽器都支援。

• content-box（預設值）
  width跟height值的範圍是content area的範圍，是元素的預設值。

  div {
    width: 200px;
    height: 100px;
    padding: 30px;
    border: 10px solid #000;
  }
  

  可以看到預設的box-sizing: content-box;只會將寬高值限定在content area的範圍，從開發者頁面，會看到<div>元素的280*180是以content寬高為基準再加上padding值跟border值得出來的結果。
  

• box-sizing
width跟height值的範圍是包含content area、padding跟border的範圍。

  div {
    width: 200px;
    height: 100px;
    padding: 30px;
    border: 10px solid #000;
    box-sizing: border-box;
  }
  

  

實用性

box-sizing在排版上，要讓不同border設定值的元素對齊時，就會非常實用。比方我們做了兩個字卡，一個有border跟一個沒有border：

.first {
  background: #ff00ff;  
  width: 300px;
    
}

.second {
  background-color: #23ff45;  
  width: 300px;
  border: 5px solid #000;
}

因為預設值是content-box，所以兩個字卡的總寬度不一，在視覺上不對齊，看起來就很不舒爽。

這時候用box-sizing屬性就可以省下計算box modle的麻煩。輕鬆的讓兩個字卡對齊。

.second {
  background-color: #23ff45;  
  width: 300px;
  border: 5px solid #000;
  box-sizing: border-box;
}

今天的筆記告一段落，明天見！

*有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝。