152

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

4

10 回答 10

56

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

于 2013-11-20T15:00:43.027 回答
17

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

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

我认为，情况是一样的，正如我们在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 中将其删除。可悲。

于 2013-11-25T10:30:16.243 回答
6

顶部的人询问是否为整体宽度添加边距，包括填充和边框。问题是，当使用border-box.

我试图实现这个border-margin想法。我发现如果使用边距，您可以.last向最后一项添加一个类（使用边距，然后应用零边距，或使用:last-child/:last-of-type）。或者一直添加相等的边距（类似于上面的填充版本）。

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

border-box计算元素的宽度 + 其填充 + 其边框作为总宽度。因此，如果您有div50% 宽的 2 s，它们将是相邻的。如果您8px向它们添加填充，那么您将有一个16px. 将它与一个包装元素（也有填充）结合起来，8px您将拥有一个布局精美的网格，周围有相同的排水沟。

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

后者是我最喜欢的方法。

于 2013-11-23T12:36:59.530 回答
5

我确信所有这些都是显而易见的，但无论如何我都会把它打出来，因为……嗯，我需要练习。以下结果会不会与以下结果一样有效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边距并%不合理（通常情况下如此），但计算相对百分比量应该更容易，因为您不必将填充和边框合并到定义的宽度。

于 2013-09-26T14:17:10.947 回答
4

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

于 2013-11-14T18:03:19.297 回答
2

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

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

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

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

于 2013-10-10T02:24:00.997 回答
1

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

于 2014-01-25T23:27:21.670 回答
1

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

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

他们建议处理排水沟的另一种通常更简单的方法是在我发现的content: '';每个列上使用伪之后和我发现效果非常好。如果您设置一个 div 类，它是定义的最后一列，例如 end 您可以将该类定位为不具有伪之后，或者具有更宽的类；最适合您的布局。

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

于 2013-10-02T21:13:17.190 回答
0

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

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

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

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

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

于 2019-02-24T00:48:58.353 回答
0

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

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

      .divX{
         width:  XX%;
         display:flex;
         align-items: center;
        justify-content: center;
      }
于 2020-12-04T21:51:16.077 回答