CSS box-sizing属性（如何定义盒子的总宽高）

定义

CSS 中的 box-sizing 属性定义了应该如何计算一个元素的总宽度和总高度。

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

计算方式：
width = 内容宽度
height = 内容高度

box-sizing: border-box;

计算方式：
width = border + padding + 内容的宽度
height = border + padding + 内容的高度

示例

HTML代码：

content box



border box

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: