为div添加边框增加div宽度？答案

【问题标题】：Add border to div increase div width?为div添加边框增加div宽度？
【发布时间】：2016-12-31 23:20:44
【问题描述】：

我有一个div，如下图，它的宽度是300px，然后我给它加了2px的边框，我的问题是2px的边框导致div的宽度是302px？

谢谢

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

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

【问题讨论】：

标签： html css

【解决方案1】：

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

您可以使用box-sizing 属性来使用它，该属性有两个可能的值：

内容框（默认）
边框框

内容框 默认。 width 和 height 属性（以及 min/max 属性）仅包括内容。边框、填充或边距是不包括

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

（来源：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】：

由于边框围绕着所有的 div，它同时出现在它的左边和右边：你必须计算它的宽度两次。所以最终的宽度将是 300 + 2*2 = 304px。

【讨论】：

谢谢，如果我想保持 div 的边框为 300px，那么宽度必须设置为 296px？

【解决方案3】：

正确而干净的答案是box-sizing: border-box; 将其添加到您的班级测试中，您的问题就消失了。

【讨论】：

【解决方案4】：

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

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

&lt;div class="test"&gt;Test&lt;/div&gt;

你也可以使用插入 box-shadow:

 .test{
    width:300px;
    height:auto;
    background-color:#A8F9C0;
    float:left;
    box-shadow:0 0 0 2px black inset;
}

&lt;div class="test"&gt;Test&lt;/div&gt;

【讨论】：

【解决方案5】：

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/

干杯，编码愉快！

【讨论】：

【解决方案6】：

在 CSS 2 中，您必须将 div 包裹在另一个 div 中（请注意，您不应为内部元素设置 width: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 中使用 box-sizing：

#test{
  width:300px;
  border:2px solid #000000;
  box-sizing:boder-box;
    }

&lt;div id="test"&gt;&amp;nbsp;&lt;/div&gt;

【讨论】：