边框应该影响布局吗？

Question

使用基本布局,如...

<div class="span-23 last" id="main">
    <div class="span-18" id="column1">
        <div class="clear span-10" id="body1"> </div>
        <div class="span-6 prepend-1 append-1" id="body2"> </div>
    </div>
    <div class="span-5 last" id="column2"> </div>
</div>

当我在任何div上定义边框时,它们要么不显示,要么移动页面元素.那么边界实际上占用了div之外的px数量吗？如果是这样我怎么能绕过这个？

我已经看到一些提及使用,position:relative;但这不是问题,因为我通常广泛使用它.

Answer 1

边界应该影响布局吗？Peter Paul Koch 在quirksmode.org上说得最好,(引用自己):

逻辑上,从边界到边界测量一个框.拿一个物理盒子,任何盒子.放入一个明显小于盒子的东西.要求任何人测量盒子的宽度.他将测量盒子两侧之间的距离("边界").没有人会想到测量盒子的内容.

网页设计师创建用于保存内容的盒子,关注盒子的可见宽度,关于从边框到边框的距离.边框而不是内容是网站用户的视觉提示.没有人对内容的宽度感兴趣.

但这样做的边界影响布局？可悲的是,答案是肯定的.考虑这个div:

.foo {
    width: 500px;
    padding: 5px;
    border: 1px solid blue;
}

这个div实际上是512px宽,因为width设置内容的宽度,而不是div.您必须添加填充和边框才能获得实际宽度.

编辑:纠正这种疯狂使用box-sizing:

.foo {
    box-sizing: border-box;
    -moz-box-sizing: border-box;  /* FireFox requires the -moz- prefix */
    width: 500px;
    padding: 5px;
    border: 1px solid blue;
}

即使有填充和边框,这个div也将是500px宽.

在jsFiddle演示

^{它在IE7(市场份额不到1%)中不起作用.}

Answer 2

是的，边界占据了物理空间。因此，如果将 div 设置为 100%，然后给它一个 1px 边框，它将比它所在的容器宽 2px。

为了解决这个问题，您可以决定根本不设置宽度（或“自动”），以便它会自动调整以考虑填充和边框。

或者，您可以嵌套元素，为外部 div 指定特定宽度，然后为内部 div 指定边框。

还有其他选择。

附录：

啊，看起来你正在使用 blueprint.css

Blueprint.css并非旨在处理向布局容器添加边框。这会破坏网格。

我过去修改过 blueprint.css 来适应这一点。通常我会添加一些可以应用于 span-x div 的独特类：

.span-border {border: 1px solid black;}
.span-8.span-border {margin-left: -1px; margin-right: 9px;}

以上基于列之间 10 像素的“装订线”。您要做的就是减少应用了边框的 span-x 两侧的装订线，以容纳边框占用的空间。