box-sizing

在 CSS 盒子模型 中，默认情况下，分配给元素的 width 和 height 属性仅应用于元素的内容区域。如果元素有任何边框或内边距，则将其添加到 width 和 height 中，以确定显示在屏幕上的盒子的尺寸。这意味着，当设置 width 和 height 时，必须调整提供的值以容纳可能添加的任何边框或内边距。例如，如果四个盒子的 width: 25%;，如果任何一个有左右内边距或左右边框，则默认情况下它们不会在父容器的约束范围内在一行内显示。

box-sizing 属性可用于调整此行为。

• content-box 提供默认的 CSS 盒子大小行为。如果将元素的宽度设置为 100 像素，则元素的内容区域将为 100 像素宽，任何边框或内边距的宽度将添加到最终呈现的宽度，使元素的宽度超过 100 像素。
• border-box 告诉浏览器在您为元素的宽度和高度指定的值中考虑任何边框和内边距。如果将元素的宽度设置为 100 像素，则这 100 像素将包括您添加的任何边框或内边距，并且内容区域将缩小以吸收该额外宽度。这通常使调整元素大小变得更容易。box-sizing: border-box 是浏览器为 <table>、<select> 和 <button> 元素以及类型为 radio、checkbox、reset、button、submit、color 或 search 的 <input> 元素使用的默认样式。

box-sizing: border-box;
box-sizing: content-box;

/* Global values */
box-sizing: inherit;
box-sizing: initial;
box-sizing: revert;
box-sizing: revert-layer;
box-sizing: unset;

box-sizing 属性指定为从以下值列表中选择的单个关键字。

content-box

这是 CSS 标准指定的初始值和默认值。 width 和 height 属性包含内容，但不包含内边距、边框或外边距。例如，.box {width: 350px; border: 10px solid black;} 呈现一个宽度为 370px 的框。

此处，元素的尺寸计算如下：width = 内容的宽度，以及 height = 内容的高度。（边框和内边距不包含在计算中。）

border-box

width 和 height 属性包含内容、内边距和边框，但不包含外边距。请注意，内边距和边框将在框内。例如，.box {width: 350px; border: 10px solid black;} 呈现一个宽度为 350px 的框，内容区域的宽度为 330px。内容区域不能为负数，并取整到 0，因此无法使用 border-box 使元素消失。

此处，元素的尺寸计算如下：width = border + padding + 内容的宽度，以及 height = border + padding + 内容的高度。

box-sizing = 
  content-box  |
  border-box   

此示例显示不同的 box-sizing 值如何更改两个在其他方面相同的元素的呈现大小。

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 */
}

结果

• CSS 盒模型