css - CSS：未应用边框框

Question

我对如何开始border-box使用 CSS 感到困惑。

#sidebar基本上我想要两个彼此相邻堆叠的 div：一个具有固定宽度的左侧，以及#results由文本占据的页面的其余部分（元素）。

我通过向左浮动两个 div 来做到这一点，在元素上使用 220px 的固定宽度，并在元素上#sidebar设置width: 100%、和 。left-margin: 220pxbox-sizing: border-box#results

但是，该#results元素太宽了 220 像素 - 看起来好像box-sizing根本没有被应用。

这个 JSFiddle 演示了我的问题：http: //jsfiddle.net/m8KFe/3/

Answer 1

该border-box值仅限制填充和边框区域 - 不考虑边距。

取自基本 UI 模块：

边框

也就是说，在元素上指定的任何填充或边框都会在指定的宽度和高度内进行布局和绘制。内容的宽度和高度是通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算的。