您偶然发现的是CSS盒子模型的基础。
您可以使用box-sizing属性进行操作，该属性有两个可能的值：
1.内容框（默认）
1.边框

• • content-box**默认值。width和height属性（以及min/max属性）仅包括内容。不包括边框、填充或边距
• • border-box**width和height属性（以及min/max属性）包括内容、填充和边框，但不包括边距

(source: W3Schools.com)
默认情况下，边框将添加到容器的宽度/高度。
看看使用border-box时会发生什么：

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

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

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

由于边界围绕着div的所有边，因此它既存在于div的左边也存在于div的右边。您必须计算边界的宽度两次。因此div的最终宽度将是300 + 2*2 = 304px。

如果希望border位于所有4个面上，而不增加元素的宽度，则可以改用outline：

.test{
    width:300px;
    height:auto;
    background-color:#A8F9C0;
    float:left;
    outline:2px solid black;
}

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

您还可以使用插入box-shadow：
一个二个一个一个

正确而清晰的答案是box-sizing: border-box;将其添加到类测试中，您的问题就解决了。

2 px边框是否导致div的宽度为302 px
不，它不是。当你设置一个元素的宽度时，你就是在设置一个元素的内容区域。
但是，您所指的是外部宽度，即宽度+填充+边框
要了解两者的区别，请查看以下框模型的工作原理https://developer.mozilla.org/en-US/docs/Web/CSS/width
还有这些链接。

宽度：http://api.jquery.com/width/
内部宽度：http://api.jquery.com/innerwidth/
外部宽度：http://api.jquery.com/outerwidth/

干杯，快乐编码！

在CSS 2中，您必须将div Package 在另一个元素中（请注意，您不应该将内部元素的宽度设置为100%，并让它自动扩展）：

var width=$("#test").width();
$("#result").html('Javascript says: The inner Width of element is '+width);

#wrapper{
  width:300px;
}
#test{
  border:2px solid #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrapper">
   <div id="test">&nbsp;</div>
</div>

<br>
<div id="result"></div>

在CSS 3中使用框大小调整：
一个三个三个一个