CSS3框的大小：边界框; 为什么不？
为什么我们没有box-sizing: margin-box; ？ 通常当我们把box-sizing: border-box; 在我们的样式表中，我们确实是指前者。
例：
比方说，我有一个2列的页面布局。 两栏的宽度都是50％，但看起来有点丑，因为没有沟槽（中间有空隙）。 以下是CSS：
.col2 { width: 50%; float: left; }
要应用排水沟，您可能会认为我们可以在2列中的第一列设置右边距; 像这样的东西：
.col2:first-child { margin-right: 24px; }
但是，这将使第二列换行，因为以下是正确的：
50% + 50% + 24px > 100%
box-sizing: margin-box; 将通过在元素的计算宽度中包含边距来解决此问题。 我会觉得这非常有用，如果没有比box-sizing: border-box;更有用box-sizing: border-box; 。
你不能使用width: calc(50% - 24px); 为你的上校？ 然后设置你的利润。
我想我们可以有一个box-sizing: margin-box 。 CSS框模型显示，帧的边缘的位置是什么。
有一些小问题 – 例如，边距框可以重叠 – 但是它们并不难解决。
我认为，情况是一样的，我们可以看到overflow-x和overflow-y组合，绝对位置在表格单元的div，与最小宽度高度与箱子大小的组合， 等等。
有一些function，非常简单的function，浏览器开发人员根本无法开发。
恕我直言， box-sizing: margin-box是一个非常有用的function。 另一个有用的function是box-sizing: padding-box ，它至less存在于标准中，但并未在任何主stream浏览器中实现。 甚至没有在最新的铬！
注意：@Oriol的评论： Firefox实现了框大小：填充框。 但其他人没有，并从规格中删除。 Firefox将在版本50中删除它。悲伤。
顶部的家伙要求为整个宽度添加边距，包括填充和边框。 事情是，边缘应用在框外，填充和边框不使用border-box 。
我试图实现border-margin想法。 我发现，如果使用保证金，你可以添加一个.last类到最后一个项目（带有保证金，然后应用一个零的余量，或使用:last-child/:last-of-type ）。 或者添加相等的边距（类似于上面的填充版本）。
看到这里的例子： http://codepen.io/mofeenster/pen/Anidc : http://codepen.io/mofeenster/pen/Anidc
Border-box计算元素的宽度+填充+边框的总宽度。 所以如果你有2个50％的div，它们将会相邻。 如果你添加填充的那些div的说8px，那么你将有一个16px的阴沟。 把它与一个包装元素（也有8px的填充）结合起来，你将会有一个很好的布局网格，并且有相同的排水沟。
在这里看到这个例子： http : //codepen.io/mofeenster/pen/vGgje
后者是我最喜欢的方法。
我相信所有这些都是显而易见的，但是我会把它输出来，因为…我需要练习。 下面的结果是不是像box-sizing: margin-box;一样有效率box-sizing: margin-box; ：
.col2 { width: 45%; height: 90%; margin: 5% 2.5%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; }
box-sizing是用来控制从哪个点填充和边界被评估为元素的整体大小。 所以虽然包含px边距的宽度不能超过% （通常总是这样），但计算相对百分比数量应该更容易，因为您不必将填充和边框合并到定义的宽度。
这是因为box-sizing属性是指在计算给定的特定维度值（填充，边框）之后元素的大小。 “box-sizing：border-box”设置元素的高度/宽度，并考虑填充以及边框宽度。 元素边距的范围比元素本身大，这意味着它修改了页面及其周围元素的stream动，因此直接改变了元素在其父元素中相对于其兄弟元素的方式。 最终，“边框”属性值会导致严重的问题，并且与直接设置元素的高度/宽度基本相同。
也许使用RGBA将边框设置为0％不透明度，并使用边框作为边距。
在Codrops上，有一些关于边缘效应和行被迫溢出的好文章。 他们build议使用rem或em单位，所有浏览器的标准化程序的css设置字体大小为100％，那么当您设置宽度和边距时，只需在注释中留言即可轻松跟踪行宽的影响总宽度。 16px到1em的转换是计算目标视口总数的方法。
至less在开发阶段这样工作，然后如果你想要“响应式”的模板，你可以将宽度转换为％，包括边距宽度。
他们build议处理排水沟的另一种方法通常比较简单，就是使用后面的和后面的content: ''; 在我发现的每一个专栏上工作得很好。 如果你设置了一个div类，这个类是定义的最后一列，比如结束，那么你可以把这个类定位为不在伪后面，或者有一个更宽的类。 哪个最适合你的布局。
使用这种伪元素方法的额外好处是，它也给了你一个阴影的目标，可以给阅读器监视器上的平面图像提供更多的3D效果和更大的深度。 我正在通过放大button上使用的效果，“调整”渐变和z-索引来试验这个效果。
正常stream动中的块级非replace元素的尺寸必须满足
margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right =包含区块的宽度
当过度约束时，浏览器必须调整左边界或右边界。 我认为这意味着边框的宽度必须等于包含块的宽度（即100％）。
对于你的情况， 透明边框与box-sizing: border-box可以很像边缘 。
