html - 为什么边框会增加元素的宽度？

Question

我有一个 div 如下。其指定宽度为 300px，边框宽度为 2px。

为什么2px的边框导致div的宽度为304px？如果我希望它有边框但宽度仍为 300 像素怎么办？

.test {
  width: 300px;
  height: auto;
  border: 2px solid black;
}

<div class="test">
</div>

Answer 1

您偶然发现的是 CSS 盒模型的基础。

您可以使用具有两个可能值的 box-sizing 属性来使用它:

1. 内容框(默认)
2. 边框框

content-box Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included

border-box The width and height properties (and min/max properties) includes content, padding and border, but not the margin

(来源:W3Schools.com)

默认情况下，边框将添加到您的容器宽度/高度上。

看看当你使用 border-box 时会发生什么:

.test {
  width: 300px;
  height: auto;
  border: 2px solid black;
  box-sizing: border-box;
}

<div class="test">
</div>

这将确保宽度保持不变并包括框边框。