我已经构建了一个标题，我将宽度定义为33.33％。只要我没有边框，这样就行得很好。只要我添加边框，我的右边元素就会显示在下一行。是否有与边界协作的属性？
答案 0 :(得分：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 会包含内容以及填充和边框。
答案 1 :(得分：1)
您可以使用
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 +内容的高度。