默认情况下，在CSS框模型中，分配给元素的宽度和高度仅应用于元素的内容框。如果元素具有任何边框或填充，则会将其添加到宽度和高度，以获得在屏幕上呈现的框的大小。这意味着当您设置宽度和高度时，您必须调整您给出的值以允许添加任何边框或填充。
该box-sizing属性可用于调整此行为：

• content-box为您提供默认的CSS框大小调整行为。如果将元素的宽度设置为100像素，则元素的内容框将为100像素宽，并且任何边框或填充的宽度将添加到最终渲染宽度。
• border-box告诉浏览器在您为元素的宽度和高度指定的值中考虑任何边框和填充。如果将元素的宽度设置为100像素，则100个像素将包含您添加的任何边框或填充，并且内容框将缩小以吸收该额外宽度。这通常会使元素的大小更容易。

句法

值

:content-box

元素的尺寸计算公式如下：width =内容的宽度，height =内容的高度。（边框和填充不包括在计算中。）

:border-box

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

例

这个例子展示了不同的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 */
}

结果