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;更有用的话，我会发现这非常有用box-sizing: border-box; .

Answer 1

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

Answer 2

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

有一些小问题 - 例如，边距框可能重叠 - 但它们并不难解决。

我认为，情况是一样的，正如我们可以看到的overflow-x和overflow-y组合，在表格单元格中使用绝对定位的 div，将 min|max-width|height 与 box-sizing 组合， 等等。

有一些功能，非常简单的功能，浏览器开发人员根本不会开发。

恕我直言， box-sizing: margin-box是一个非常有用的功能。 另一个有用的功能是box-sizing: padding-box ，它至少存在于标准中，但没有在任何主要浏览器中实现。 即使在最新的 chrome 中也不行！

---

注意：@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 个宽度为 50% 的div ，它们将是相邻的。 如果向它们添加8px填充，那么您将拥有16px的装订线。 将它与一个包装元素相结合——它也有8px填充——你将有一个布局很好的网格，四周都有相等的排水沟。

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

后者是我最喜欢的方法。

Answer 4

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

http://jsfiddle.net/Fg3hg/

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

Answer 5

这是因为 box-sizing 属性指的是计算给定的特定维度值（填充、边框）后元素的大小。 "box-sizing: border-box" 设置元素的高度/宽度并考虑填充和边框宽度。 元素边距的范围大于元素本身，这意味着它会修改页面及其周围元素的流向，因此直接改变元素相对于其兄弟元素在其父元素中的适应方式。 最终，“margin-box”属性值会导致重大问题，本质上与直接设置元素的高度/宽度相同。

Answer 6

正常流中块级非替换元素的维度必须满足

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = 包含块的宽度

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

对于您的情况，带有box-sizing: border-box透明边框可以像 margins 一样工作。

Answer 7

在Codrops 上，有几篇关于边距和行被迫溢出的影响主题的好文章。 他们建议使用 rem 或 em 单位与规范化器 css 将所有浏览器的字体大小设置为 100%，然后当您设置宽度和边距时，只需在注释中添加注释即可轻松跟踪对行宽度的影响总宽度。 16px 到 1 em 的转换是计算目标视口总宽度的方法。

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

他们建议处理装订线的另一种通常更简单的方法是使用伪 after 和content: ''; 在你的每一列上，我发现它们都非常有效。 如果您设置的 div 类是定义的最后一列，例如 end，则可以将该类作为目标，使其后不具有伪，或者具有更宽的伪； 哪个最适合您的布局。

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

Answer 8

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

Answer 9

在正文内容中使用box-sizing时出现有趣的情况

没有内容没有边框框在左右边距上没有任何值这两个框重新计数算法的重新计数百分比

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

Firefox 57 之前的版本也支持用于 box-sizing 的 padding-box 值，尽管该值已从规范和更高版本的浏览器中删除。

所以margin-box甚至没有计划......

Answer 10

这是来自w3档案的讨论：

https://lists.w3.org/Archives/Public/www-style/2015Jun/0270.html

Answer 11

应该有一个 box-sizing: margin-box;

但是否有以下工作：在它周围放置一个 div

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