CSS3框的大小:边界框; 为什么不?

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

你不能使用width: calc(50% - 24px); 为你的上校? 然后设置你的利润。

我想我们可以有一个box-sizing: margin-box 。 CSS框模型显示,帧的边缘的位置是什么。

有一些小问题 – 例如,边距框可以重叠 – 但是它们并不难解决。

我认为,情况是一样的,我们可以看到overflow-xoverflow-y组合,绝对位置在表格单元的div,与最小宽度高度与箱子大小的组合, 等等。

有一些function,非常简单的function,浏览器开发人员根本无法开发。

恕我直言, box-sizing: margin-box是一个非常有用的function。 另一个有用的function是box-sizing: padding-box ,它至less存在于标准中,但并未在任何主stream浏览器中实现。 甚至没有在最新的铬!


注意:@Oriol的评论: Firefox实现了框大小:填充框。 但其他人没有,并从规格中删除。 Firefox将在版本50中删除它。悲伤。

顶部的家伙要求为整个宽度添加边距,包括填充和边框。 事情是,边缘应用在框外,填充和边框不使用border-box

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

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

Border-box计算元素的宽度+填充+边框的总宽度。 所以如果你有2个50%的div,它们将会相邻。 如果你添加填充的那些div的说8px,那么你将有一个16px的阴沟。 把它与一个包装元素(也有8px的填充)结合起来,你将会有一个很好的布局网格,并且有相同的排水沟。

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

后者是我最喜欢的方法。

我相信所有这些都是显而易见的,但是我会把它输出来,因为…我需要练习。 下面的结果是不是像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边距的宽度不能超过% (通常总是这样),但计算相对百分比数量应该更容易,因为您不必将填充和边框合并到定义的宽度。

这是因为box-sizing属性是指在计算给定的特定维度值(填充,边框)之后元素的大小。 “box-sizing:border-box”设置元素的高度/宽度,并考虑填充以及边框宽度。 元素边距的范围比元素本身大,这意味着它修改了页面及其周围元素的stream动,因此直接改变了元素在其父元素中相对于其兄弟元素的方式。 最终,“边框”属性值会导致严重的问题,并且与直接设置元素的高度/宽度基本相同。

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

在Codrops上,有一些关于边缘效应和行被迫溢出的好文章。 他们build议使用rem或em单位,所有浏览器的标准化程序的css设置字体大小为100%,那么当您设置宽度和边距时,只需在注释中留言即可轻松跟踪行宽的影响总宽度。 16px到1em的转换是计算目标视口总数的方法。

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

他们build议处理排水沟的另一种方法通常比较简单,就是使用后面的和后面的content: ''; 在我发现的每一个专栏上工作得很好。 如果你设置了一个div类,这个类是定义的最后一列,比如结束,那么你可以把这个类定位为不在伪后面,或者有一个更宽的类。 哪个最适合你的布局。

使用这种伪元素方法的额外好处是,它也给了你一个阴影的目标,可以给阅读器监视器上的平面图像提供更多的3D效果和更大的深度。 我正在通过放大button上使用的效果,“调整”渐变和z-索引来试验这个效果。

正常stream动中的块级非replace元素的尺寸必须满足

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

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

对于你的情况, 透明边框与box-sizing: border-box可以很像边缘 。