CSS box-sizing屬性（如何定義盒子的總寬高）

定義

CSS 中的 box-sizing 屬性定義了應該如何計算一個元素的總寬度和總高度。

box-sizing: content-box;（默認）

計算方式：
width = 內容寬度
height = 內容高度

box-sizing: border-box;

計算方式：
width = border + padding + 內容的寬度
height = border + padding + 內容的高度

示例

HTML代碼：

<!-- width = 內容寬度 100px-->
<!-- height = 內容高度 100px-->
<div id="content">content box</div>
<hr>
<!-- width = padding + border + 內容寬度          100 = 10*2 + 5*2 + 內容寬度 = 30 + 內容寬度（70）-->
<!-- height = padding + border + 內容高度         100 = 10*2 + 5*2 + 內容高度 = 30 + 內容高度（70）-->
<div id="border">border box</div>

CSS代碼：

#content {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid pink;
  /* box-sizing: content-box; */
}
#border {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid pink;
  box-sizing: border-box;
}

content-box:

border-box: