Html 向div添加边框是否增加div宽度？

我有一个

div

如下，它的宽度是300px，然后我给它加上边框2px，我的问题是2px边框导致

div

的宽度是302px

谢谢

.test{
宽度：300px；
高度：自动；
背景色：#A8F9C0；
浮动：左；
边框：2件纯黑；
}

由于边界位于所有div的周围，因此它在其左侧和右侧都存在：您必须将其宽度计算两次。因此，最终宽度将为300+2*2=304px。

如果希望

边框在所有4个边上，而不增加元素的宽度，则可以使用：


.test{
宽度：300px；
高度：自动；
背景色：#A8F9C0；
浮动：左；
外形：2倍纯黑；
}
测试
2px边框是否导致div的宽度为302px

不，没有。设置元素的宽度时，就是设置元素的内容区域

然而，您所指的是外部宽度，即宽度+填充+边框

要了解差异，请看盒子模型是如何工作的

还有这些链接

宽度：

内部宽度：

外部宽度：

干杯，快乐编码
 正确而清晰的答案是
框大小：边框框将它添加到你的类测试中，你的问题就消失了。
 
你所遇到的是CSS框模型的基础。
您可以使用具有两个可能值的
框大小调整
属性来使用它：

内容框（默认）
边框框
内容框默认值。宽度和高度属性（以及最小/最大属性）仅包括内容。边框、边距或边距不可用
不包括

边框框宽度和高度属性（以及最小/最大属性）包括内容、填充和边框，但不包括边距

（来源：W3Schools.com）

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

查看使用
边框框时发生的情况：


.test{
宽度：300px；
高度：自动；
背景色：#A8F9C0；
浮动：左；
边框：2件纯黑；
框大小：边框框；
}
在css2中，您必须将div包装在另一个div中（请注意，您不应该为内部元素设置宽度：100%，并让它自动展开）：


var-width=$（“#测试”）.width（）；
$（“#result”）.html（'Javascript表示：元素的内部宽度为'+Width'）
#包装器{
宽度：300px；
}
#试验{
边框：2倍实心#000000；
}



谢谢，所以如果我想保持div的边框为300px，那么宽度必须设置为296px？谢谢你的帮助，没问题。