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 下，如何伸縮自如的掌握自己設計的每個元件尺寸

本篇參考學習資源

小結