为什么在css中添加线边框会弄乱它的正确位移？

基于另一个，我尝试将线边框添加到放置在外部边框内的div中

然而这导致div为什么

加价

<div id="outer">
        <div id="chart"></div>
        <div id="table"></div>
</div>

---

边框

和

填充

都添加到元素的

宽度

和

高度

。减小高度和宽度以保持总尺寸不变。

400px+2个边框边缘=402px。402px+900px=1302px，对于1300px容器来说太宽，因此浮子下降

最简单的修复方法是用轮廓替换边框：

---

轮廓：1px纯黑
这是因为盒子的型号。。。box模型认为内容的尺寸是由CSS中的高度和宽度定义的尺寸

现在你把高度：100%放在内容上。。添加的任何边框都将添加到该

解决方案是通过以下方式替代图元的长方体模型计算：

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

这样，高度和宽度将包括填充和边框
在css中使用此属性：

box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */

有了它，您可以定义某些元素以某种方式适合某个区域

更多信息：
使用
框大小：边框框
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */