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

边框应该影响布局吗？彼得保罗科赫said it best at quirksmode.org，（quoting himself）：

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

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

但做边框会影响布局吗？可悲的是，答案是肯定的。考虑一下这个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，即使有填充和边框。

Demo at 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;}

以上是基于列之间的10px'装订线'。你所做的是减少span-x两侧的沟槽，它有一个边框应用于它，以适应边界占用的空间。

Answer 3

边框计入元素的整个宽度和高度为避免这种情况，请使用outline。

.element{
    outline: 1px solid black;
}

Answer 4

只是不要为任何块级元素指定宽度。然后将考虑边界。

Answer 5

CSS框模型将border和padding定义为width和height之外，即width和height指定仅限内容区域大小，不包括border或padding。

顺便说一下，旧的IE框模型，这是你在IE中得到的＆lt; 6，以及怪癖模式，包括border和padding中的width和height。 outline有点像border，但不会增加元素大小。

Answer 6

边框会占用实际元素之外的像素...因此，如果您有div width: 20px和border: 1px，则全宽为22px。绕过它的一种方法是使用具有指定宽度的容器，然后使用没有指定宽度的内部div和边框。

以下是一个示例：http://jsfiddle.net/pWB9U/

边框应该影响布局吗？

6 个答案: