CSS3框大小: 边框; 为什么不呢？

为什么我们没有 box-sizing: margin-box;呢? 通常当我们把 box-sizing: border-box;放到样式表中时，我们指的是前者。


例如:

假设我有一个2栏的页面布局。两个栏目都有50% 的宽度，但是它们看起来有点丑，因为没有排水沟(中间的间隙) ; 下面是 CSS:

.col2 {
width: 50%;
float: left;
}


要使用排水沟，你可能会认为我们可以在两列中的第一列设置一个右边距; 类似这样:

.col2:first-child {
margin-right: 24px;
}

但这会使第二列换行成新行，因为下面的内容是正确的:

50% + 50% + 24px > 100%

box-sizing: margin-box;可以通过在计算的元素宽度中包含边距来解决这个问题。我会发现这个 非常有用，如果不比 box-sizing: border-box;更有用。

73778 次浏览
小开

我相信这些都是显而易见的，但我还是要把它们打出来，因为... 我需要锻炼。下列结果是否与 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边距(通常都是这样)并不合适，但是计算相对百分比应该是多少会更容易，因为你不需要在定义的宽度上加入填充和边框。

小开

在 水晶球上有几篇关于边际效应和行的被迫溢出的好文章。他们建议使用 rem 或 em 单元，使用标准化 CSS 设置所有浏览器的字体大小为100% ，然后当你设置宽度和边距时，很容易通过简单地在注释中记录总宽度来跟踪对行宽度的影响。将16px 转换为1em 是计算目标视图总和的方法。

至少在开发阶段是这样工作的，然后如果你想要“响应”模板，你可以将宽度转换为% ，包括边距宽度。

他们建议的另一种处理排水沟的简单方法是在你的每一个专栏中使用伪之后和 content: '';，我发现这种方法非常有效。如果您将 div 类设置为已定义的最后一列(如 end) ，那么您可以将该类定位为不包含伪目录，或者不包含更广泛的目录; 哪一个目录最适合您的布局。

使用这种伪元素方法的额外好处是，它还提供了一个阴影目标，可以提供更多的三维效果和更大的深度的平面图像的读者监视器以及。我现在正在试验这种效果，通过放大按钮上使用的效果，“调整”渐变和 z-index。

小开

正常流程中未替换的块级元件的尺寸必须满足

边距-左边框-左边框-宽度 + 填充-左边框-宽度 + 填充-右边框-右边框-宽度 + 边距-右边框-= 包含块的宽度

当过度约束时，浏览器必须调整左边距或右边距。 我认为这意味着边距框 必须的的宽度等于包含块的宽度(即100%)。

对于你的情况，使用 box-sizing: border-box的透明边框可以像边距一样工作。

小开

这是因为 box-size 属性指的是在计算给定的特定于维度的值(填充、边框)之后元素的大小。“ box-size: orders-box”设置元素的高度/宽度，并考虑填充和边框宽度。元素的边距范围大于元素本身，这意味着它修改了页面及其周围元素的流程，从而直接改变了元素与其父元素相对于其兄弟元素的匹配方式。最终，“页边框”属性值会导致重大问题，本质上与直接设置元素高度/宽度相同。

小开

你不能用 width: calc(50% - 24px);做你的协议吗? 然后设置你的边距。

小开

在顶部的家伙正在询问关于添加边距的整体宽度，包括填充和边框。问题是，当使用 border-box时，边距应用在框外，而填充和边框不应用在框外。

我试图实现 border-margin的想法。我发现，如果使用页边距，你可以在最后一个项目中添加一个类 .last(使用页边距，然后应用一个零的页边距，或者使用 :last-child/:last-of-type)。或者在周围添加相同的边距(类似于上面的填充版本)。

看这里的例子: http://codepen.io/mofeenster/pen/Anidc

border-box计算元素的宽度 + 它的填充值 + 它的边界作为总宽度。所以如果你有两个50% 宽的 div，它们就会相邻。如果您添加 8px填充到他们，那么您将有一个 16px槽。结合一个包装元素-它也有 8px填充-你将有一个良好的布局网格与相同的水槽周围所有的道路。

看这个例子: http://codepen.io/mofeenster/pen/vGgje

后者是我最喜欢的方法。

小开

我想我们可以做个 box-sizing: margin-box。Css 框模型准确地显示了框架边距的位置。

还有一些小问题——例如，保证金框可能重叠——但它们并不难解决。

我认为情况是一样的，我们可以看到 overflow-x和 overflow-y的组合，表格单元格中的绝对定位 div，最小 | 最大宽度 | 高度和盒子大小的组合，等等。

有些特性，非常简单的特性，浏览器开发人员根本就没有开发。

恕我直言，box-sizing: margin-box是一个非常有用的功能。另一个有用的特性是 box-sizing: padding-box，它至少在标准中存在，但是在任何主流浏览器中都没有实现。就算是最新的铬合金也不行！

注:@Oriol 评论: Firefox 确实实现了 box-size: paddingbox。但是其他人没有，它被从规范中删除了。Firefox 将在50版本中删除它。真可怜。

小开

也许可以使用 RGBA 将边框设置为0% 不透明，并使用边框作为边距。

小开

在正文内容中使用 盒子大小有一些有趣的情况

没有内容没有边框没有任何值在左右边距% 重新计算这两个框重新计算算法

  .body{
box-sizing: border-box;
margin:0 3%;
}

57之前的 Firefox 版本也支持 盒子大小，虽然这个值已经从规范中删除 以及浏览器的后续版本。

所以即使没有计划保证金..。

小开

应该有一个盒子大小: 边框;

但以下方法是否奏效: 在它周围放一个 Div

      .divX{
width:  XX%;
display:flex;
align-items: center;
justify-content: center;
}

提交答案