table box-sizing属性

1.
（1）box-sizing: content-box（默认值）。如果设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度会被增加到最后绘制出来的元素宽度中。也就是说width和height只包含宽度和高度，不包括border、padding和margin。注意：内边距、边框和外边距都在这个盒子外部。

（2）box-sizing: border-box。想要设置的边框和内边距的值是包含在width内的。如果将一个元素的width设置为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width-border-padding的值。注意：border-box不包含margin。

// html
<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>
// css
div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

结果：