CSS3 box-sizing:margin-box; 为什么不？

Question

我们为什么不拥有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;.

Answer 1

你不能用width: calc(50% - 24px);你的cols？然后设置你的边距.

Answer 2

我想我们可以有一个box-sizing: margin-box.css框模型准确显示了框架边距的位置.

存在一些小问题 - 例如,边距框可以重叠 - 但它们并不难解决.

我认为,情况是一样的,因为我们可以通过看overflow-x和overflow-y组合,与表细胞的绝对positionied的div,用最小的组合|最大宽度|高度与盒大小,依此类推.

有一些功能,非常简单的功能,浏览器开发人员根本没有开发.

恕我直言,box-sizing: margin-box是一个非常有用的功能.另一个有用的特性是box-sizing: padding-box,它至少存在于标准中,但它没有在任何主流浏览器中实现.甚至没有最新的镀铬!

注意:@Oriol的评论:Firefox确实实现了box-sizing:padding-box.但其他人没有,它已从规范中删除.Firefox将在50版中删除它.悲伤.

Answer 3

顶部的人要求在整体宽度上添加边距,包括填充和边框.问题是,在使用时,边框应用于框外,填充和边框不适用border-box.

我试图实现这个border-margin想法.我发现如果使用保证金你可以添加一个类.last到最后一项(有保证金,然后应用零保证金,或使用:last-child/:last-of-type).或者一直添加相等的边距(类似于上面的填充版本).

请参阅此处的示例:http://codepen.io/mofeenster/pen/Anidc

border-box计算元素的宽度+其填充+边界作为总宽度.因此,如果您有2 div秒宽50%,它们将相邻.如果你8px给他们添加填充,那么你将有一个阴沟16px.将它与包裹元素(也有填充物)相结合8px,你将拥有一个布局合理的网格,周围有相同的排水沟.

请在此处查看此示例:http://codepen.io/mofeenster/pen/vGgje

后者是我最喜欢的方法.

Answer 4

我相信所有这些都是显而易见的，但我还是会打出来，因为……好吧，我需要练习。以下结果是否与以下结果一样有效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;
}

http://jsfiddle.net/Fg3hg/

box-sizing用于控制从哪一点开始将填充和边框评估为元素的整体大小。因此，虽然包含px具有%宽度的边距（通常情况下总是如此）并不符合犹太教规，但计算相对百分比量应该是多少更容易，因为您不必将填充和边框合并到定义的宽度中。