CSS 習作｜Box Sizing 盒模型計算方式

The CSS box-sizing property allows us to include the padding and border in an element's total width and height.

• box-sizing: content-box;
  ( width、height 設定作用在 content-box )
  
• box-sizing: border-box;
  ( width、height 設定作用在 content-box + padding-box + border-box ）

Box-model 盒模型

• 藍色 content-box
• 綠色 padding-box
• 橘黃 border-box
• 橘色 margin-box

通常預設為：box-sizing：content-box

*{ 
　box-sizing: content-box;
}
.box{
  width: 500px;
  height: 500px;
  background: #95B5BF;
  padding: 60px;
  border: 30px solid #F8DDA4;
  margin: 30px;
  font-size: 20px;
}

box-sizing：content-box 的計算方式

box-sizing：border-box 的計算方式

在畫面上的差異

問題紀錄：誤區測試與釐清

1. box-sizing：border-box 下，如果 padding、border 的數值大於 width 時會發生什麼？
2. 什麼樣的情況下，會使在 box-sizing：border-box 下仍然破版、跑版？
3. box-sizing：border-box 下，如何伸縮自如的掌握自己設計的每個元件尺寸

本篇參考學習資源

小結