边框溢出

我已经构建了一个头文件，并将宽度定义为33.33％。这工作正常，只要我没有边界。只要我添加边框，我的右边的元素将显示在下一行。是否有与边界合作的属性？边框溢出

来源

2016-11-20 Joel

好心地张贴您的代码 – prasanth

[这]（http://stackoverflow.com/questions/8721001/putting-a-border-around-floating-elements）将帮助我猜。 –

给出的标准CSS盒模型（内容框），你的元素的整体水平宽度将是：

border-left + padding-left + width + padding-right + border-right

正如你所看到的， width仅指内容的宽度 - 它不包括填充或边框。

因此，如果你的元素是33.33%宽，然后应用：

border: 2px solid rgb(0,0,0);

你的元素是不再33.33%宽。

现在是2px + 33.33% + 2px宽。

解决方案＃1使用计算（）：

您可以继续参照标准CSS盒模型（内容框），但以补偿在每个2px宽度边界边，你可以声明元素的宽度：

width: calc(33.33% - 4px);

解决方案＃2采用箱尺寸：

你可以告诉浏览器不要参考标准CSS盒模型（内容盒），并使用替代CSS盒模型（ 边界框）代替：

box-sizing: border-box;

当浏览器是指边界框模式，width确实包含包含内容和填充以及边框。

来源

2016-11-20 15:11:48 Rounin

为什么先给糟糕的方法？ – NikxDa

因为它容纳了成为标准的CSS Box Model（即内容盒）。 Box Model应该成为标准的比赛可以追溯到2000年代中期的浏览器大战。 Border-Box是Internet Explorer的首选实现。当然，参考边框模型并没有什么错，但是在继续引用内容框模型的同时，如何处理这种情况也是值得的。 – Rounin

您可以使用

box-sizing: border-box;

看到https://developer.mozilla.org/en/docs/Web/CSS/box-sizing

width和height属性包括内容，填充和边界，而不是利润率。这是Internet Explorer在文件处于怪癖模式时使用的盒子模型。请注意，填充和边框将位于框内，例如。box {width：350px; border：10px solid black;}导致在宽度：350px的浏览器中呈现的框。内容框不能为负数，并且被置为0，因此无法使用边框来使元素消失。这里的尺寸计算为：width = border + padding + content的宽度，height = border + padding +内容的高度。

来源

2016-11-20 15:17:50 Huangism

@Quentin谢谢我试图解决blockquote，但遇到麻烦 – Huangism

回答

相关问题