CSS CSS3 box-sizing: margin-box; 为什么不？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10808413/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 box-sizing: margin-box; Why not?
提问by Web_Designer
Why don't we have box-sizing: margin-box;? Usually when we put box-sizing: border-box;in our style sheets we really mean the former.
为什么我们没有box-sizing: margin-box;？通常，当我们放入box-sizing: border-box;样式表时，我们真正指的是前者。
Example:
例子：
Let's say I have a 2 column page layout. Both columns have a width of 50%, but they look kind of ugly because there's no gutter (gap in the middle); Below is the CSS:
假设我有一个 2 列页面布局。两列都有 50% 的宽度，但它们看起来有点难看，因为没有排水沟（中间有间隙）；下面是CSS：
.col2 {
width: 50%;
float: left;
}
To apply a gutter you might think we could just set a right margin on the first of the 2 columns; something like this:
要应用装订线，您可能认为我们可以在 2 列中的第一列设置右边距；像这样：
.col2:first-child {
margin-right: 24px;
}
But this would make the second column wrap onto a new line, because the following is true:
但这会使第二列换行，因为以下情况为真：
50% + 50% + 24px > 100%
box-sizing: margin-box;would solve this issue by including margin in the calculated width of the element. I would find this veryuseful if not more useful than box-sizing: border-box;.
box-sizing: margin-box;将通过在元素的计算宽度中包含边距来解决这个问题。我会发现这非常有用，如果不是比box-sizing: border-box;.
回答by Slouch
Couldn't you use width: calc(50% - 24px);for your cols? Then set your margins.
你不能width: calc(50% - 24px);用于你的cols吗？然后设置你的边距。
回答by peterh - Reinstate Monica
I think we could have a box-sizing: margin-box. The css box model shows exactly, what are the positions of the margins of the frames.
我想我们可以有一个box-sizing: margin-box. css box 模型准确地显示了框架的边距的位置。
There are minor problems - for example, the margin boxes can overlap - but they aren't hard to solve.
有一些小问题 - 例如，边距框可能重叠 - 但它们并不难解决。
I think, the situation is the same, as we can see with the overflow-x& overflow-ycombinations, with the absolut positionied divs in table-cells, with the combination of min|max-width|height with the box-sizing, and so on.
我认为，情况是一样的，正如我们可以看到的overflow-x&overflow-y组合，表格单元格中的绝对定位 div，最小|最大宽度|高度与框大小的组合，等等。
There are features, really simple features, which the browser developers simply doesn't develop.
有一些功能，非常简单的功能，浏览器开发人员根本不会开发。
IMHO, box-sizing: margin-boxwere a very useful feature. Another useful feature were the box-sizing: padding-box, it exists at least in the standard, but it wasn't implemented in any of the major browsers. Not even in the newest chrome!
恕我直言，这box-sizing: margin-box是一个非常有用的功能。另一个有用的特性是box-sizing: padding-box，它至少存在于标准中，但没有在任何主要浏览器中实现。即使在最新的 chrome 中也不行！
Note: @Oriol 's comment: Firefox did implement box-sizing: padding-box. But others didn't, and it was removed from the spec. Firefox will remove it in version 50. Sad.
注意：@Oriol 的评论：Firefox 确实实现了 box-sizing: padding-box。但其他人没有，它从规范中删除。Firefox 将在版本 50 中删除它。悲伤。
回答by Morgan Feeney
The guy at the top is asking about adding margin to the overall width, including padding and border. The thing is, margin is applied outside the box and padding and border aren't, when using border-box.
顶部的人询问是否要为整体宽度添加边距，包括填充和边框。问题是，当使用border-box.
I have tried to achieve the border-marginidea. What I have found is that if using margin you can either add a class of .lastto the last item (with margin, then apply a margin of zero, or use :last-child/:last-of-type). Or add equal margins all the way around (similar to the padding version above).
我试图实现这个border-margin想法。我发现，如果使用边距，您可以.last在最后一个项目中添加一个类（使用边距，然后应用边距为零，或者使用:last-child/:last-of-type）。或者一直添加相等的边距（类似于上面的填充版本）。
See examples here: http://codepen.io/mofeenster/pen/Anidc
请参阅此处的示例：http: //codepen.io/mofeenster/pen/Anidc
border-boxcalculates the width of the element + its padding + its border as the total width. So if you have 2 divs which are 50% wide, they will be adjacent. If you add 8pxpadding to them, then you will have a gutter of 16px. Combine that with a wrapping element - which also has padding of 8px- you will have a nicely laid out grid with equal gutters all the way around.
border-box计算元素的宽度+它的填充+它的边框作为总宽度。因此，如果您有 2 个div50% 宽的 s，它们将是相邻的。如果您8px向它们添加填充，那么您将有一个16px. 将它与一个包装元素相结合——它也有填充8px——你将拥有一个布局良好的网格，四周都有相等的排水沟。
See this example here: http://codepen.io/mofeenster/pen/vGgje
在此处查看此示例：http: //codepen.io/mofeenster/pen/vGgje
The latter is my favourite method.
后者是我最喜欢的方法。
回答by Plummer
I'm sure all of this is obvious, but I'll type it out anyway because...well, I need the exercise. Would the following outcome not be just as efficient as 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-sizingis used to control from which point the padding and border are assessed to the overall size of the element. So while it's not kosher to include pxmargins with a %width (as is usually always the case), it's easier to calculate what the relative percentage amount should be because you don't have to incorporate padding and borders to the defined width.
box-sizing用于控制从哪一点开始将填充和边框评估为元素的整体大小。因此，虽然包含px具有%宽度的边距（通常情况下总是如此）并不符合犹太教规，但计算相对百分比量应该是多少更容易，因为您不必将填充和边框合并到定义的宽度中。
回答by Ryan
This is because the box-sizing attribute refers to the size of an element after computing the given dimension-specific values (padding, borders). "box-sizing: border-box" sets the height/width of an element and takes into consideration the padding as well as the border width. The scope of an element's margin is greater than the element itself, meaning it modifies the flow of the page and its surrounding elements, therefore directly altering the way the element fits within its parent relative to its sibling elements. Ultimately a "margin-box" attribute value would cause major problems and is essentially the same as setting the elements height/width directly.
这是因为 box-sizing 属性指的是计算给定的特定维度值（填充、边框）后元素的大小。"box-sizing: border-box" 设置元素的高度/宽度并考虑填充和边框宽度。元素边距的范围大于元素本身，这意味着它会修改页面及其周围元素的流向，因此直接改变元素相对于其兄弟元素在其父元素中的适应方式。最终，“margin-box”属性值会导致重大问题，本质上与直接设置元素的高度/宽度相同。
回答by Weedy101
On Codropsthere are a couple of good articles on the subject of the effect of margins and row's forced to overflow. They suggest using the rem or em unit with a normalizer css setting font size to 100% for all browsers, then when you set widths and margins it is easy to keep track of the effect on the row's width by simply making a note in comments for the total width. A conversion of 16px to 1 em is the way to calculte the targeted viewports total witdh.
在Codrops 上，有几篇关于边距和行被迫溢出的影响主题的好文章。他们建议将 rem 或 em 单位与归一化器 css 一起使用，将所有浏览器的字体大小设置为 100%，然后当您设置宽度和边距时，只需在注释中添加注释即可轻松跟踪对行宽度的影响总宽度。16px 到 1 em 的转换是计算目标视口总宽度的方法。
Working like that for the dev stage at least and then if you want 'responsive' templates you can convert widths to % including the margin widths.
至少在开发阶段这样工作，然后如果你想要“响应式”模板，你可以将宽度转换为 % ，包括边距宽度。
The other and often simpler way they suggest to handle gutters is to use the pseudo after and the content: '';on each of your columns which I find works really well. If you set a div class that is the defined last column such as end you can then target that class not to have the pseudo after, or to have a wider one; which ever best suits your layout.
他们建议处理装订线的另一种通常更简单的方法是content: '';在您的每个列上使用伪 after 和 the ，我发现这非常有效。如果您设置的 div 类是定义的最后一列，例如 end，则可以将该类作为目标，使其后不具有伪，或者具有更宽的伪；哪个最适合您的布局。
The added bonus of using this pseudo element method is it also gives you a target for shadows that can give a more 3d effect and greater depth to the flat image on the readers monitor as well. I am experimenting with this effect at the moment by scaling up the effects being used on buttons, 'tweaking' the gradients, and the z-index.
使用这种伪元素方法的额外好处是它还为您提供了一个阴影目标，可以为阅读器监视器上的平面图像提供更多 3d 效果和更大的深度。我目前正在通过放大按钮上使用的效果、“调整”渐变和 z-index 来试验这种效果。
回答by sam
Dimensions of block-level, non-replaced elements in normal flowmust satisfy
margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = width of containing block
margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = 包含块的宽度
When over-constrained, browsers must adjust either the left or right margin. I think that means the width of the margin box mustequal the width of the containing block (i.e. 100%).
当过度约束时，浏览器必须调整左边距或右边距。我认为这意味着边距框的宽度必须等于包含块的宽度（即 100%）。
For your case, transparent borders with box-sizing: border-boxcan work much like margins.
回答by user3236407
Perhaps set the border to 0% opacity using RGBA and use the border as a margin.
也许使用 RGBA 将边框设置为 0% 不透明度并将边框用作边距。
回答by Dmytro Yurchenko
There interesting situation when using box-sizinginside body content
在正文内容中使用box-sizing时出现有趣的情况
no content no border box gives no any value on left-right margin % recount of this two box recount algoritms
没有内容没有边框框在左右边距上没有任何值这两个框重新计数算法的重新计数百分比
.body{
box-sizing: border-box;
margin:0 3%;
}
Firefox versions before 57 also supported the padding-box value for box-sizing, though this value was been removed from the specification and later versions of the browser.
Firefox 57 之前的版本也支持用于 box-sizing 的 padding-box 值，尽管该值已从规范和更高版本的浏览器中删除。
So margin-box even not planned...
所以margin-box甚至没有计划......
