Question

我已经构建了一个标题，我将宽度定义为33.33％。只要我没有边框，这样就行得很好。只要我添加边框，我的右边元素就会显示在下一行。是否有与边界协作的属性？

Answer 1

鉴于标准 CSS Box模型（ content-box ），您元素的整体水平宽度将为：

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使用calc（）：

您可以继续参考标准的 CSS Box模型（内容框），但为了补偿每一侧的2px宽度边框，您可以将元素的宽度声明为：

width: calc(33.33% - 4px);

使用大小调整解决方案＃2

您可以告诉浏览器不要参考标准 CSS Box模型（ content-box ）并使用其他 CSS Box模型（ border-box ）代替：

box-sizing: border-box;

当浏览器引用 border-box 模型时，width 会包含内容以及填充和边框。

Answer 2

您可以使用

box-sizing: border-box;

请参阅https://developer.mozilla.org/en/docs/Web/CSS/box-sizing

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

边境casuses溢出

2 个答案: