边框应该影响布局吗？

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

是的，边界会占用物理空间。因此，如果您将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;}

上面是基于列之间10px的“间隔”。您要做的是减少span-x的每一侧的间距，该span-x应用了边框以适应边框所占的空间。

Answer 2

边框计入元素的整个宽度和高度。

要避免这种情况，请使用outline。

.element{
    outline: 1px solid black;
}

Answer 3

只是不要给你的任何块级元素指定宽度。然后这些边界就会被计算在内。