我有div如下，其宽度为300px，然后我为它添加2px边框，我的问题是2px边框导致div的宽度为302px？< / p>
谢谢
.test{
width:300px;
height:auto;
background-color:#A8F9C0;
float:left;
border:2px solid black;
}<div class="test">
</div>
答案 0 :(得分：4)
由于边框位于所有div的周围，因此它的左侧和右侧都存在：您必须将其宽度计算两次。所以最终的宽度将是300 + 2 * 2 = 304px。
答案 1 :(得分：4)
你遇到的是CSS盒子模型的基础。
您可以使用具有两个可能值的box-sizing属性来播放它：
内容框默认。 width和height属性（以及min / max属性）仅包含内容。边框，填充或边距是 不包括在内
border-box 宽度和高度属性（以及最小/最大属性）包括内容，填充和边框，但不包括边距
（ source ：W3Schools.com）
默认情况下，边框将添加到容器宽度/高度。
查看使用border-box时会发生什么：
.test{
width:300px;
height:auto;
background-color:#A8F9C0;
float:left;
border:2px solid black;
box-sizing: border-box;
}<div class="test">
</div>
这将确保宽度保持不变并包含框边框。
答案 2 :(得分：1)
如果您希望border在所有4个边上而不增加元素的宽度，则可以改为使用outline：
.test{
width:300px;
height:auto;
background-color:#A8F9C0;
float:left;
outline:2px solid black;
}<div class="test">Test</div>
您还可以使用插入box-shadow：
.test{
width:300px;
height:auto;
background-color:#A8F9C0;
float:left;
box-shadow:0 0 0 2px black inset;
}<div class="test">Test</div>
答案 3 :(得分：1)
正确而干净的答案是box-sizing: border-box;将其添加到您的班级考试中，您的问题就消失了。
答案 4 :(得分：0)
2px边框是否导致div的宽度为302px
不，不。设置元素的宽度时，您要设置元素的内容区域。
然而你所指的是外部宽度，即宽度+填充+边框
要了解盒子模型在这里工作的区别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/
欢呼和快乐的编码！
答案 5 :(得分：0)
你必须将div包装在另一个内（请注意，你不应该为内部元素设置宽度：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"> </div>
</div>
<br>
<div id="result"></div>CSS 3 中的
使用box-sizing：
#test{
width:300px;
border:2px solid #000000;
box-sizing:boder-box;
}<div id="test"> </div>