所有浏览器中的CSS宽度百分比和填充百分比错误

Question

看这个例子:

http://jsfiddle.net/nvcode/BnGyu/2/

现在很明显，浏览器可以正确地计算宽度，因为第一个div被完全填充，但在第二个div上，我放置了98%的宽度和1%的填充，使总数为100%。

浏览器知道100%是父div的全宽度，那么为什么子div不填充父div的空间呢?

即使你改变宽度的值，它打破甚至更多?

Answer 1

默认情况下，任何块级元素都将展开以填充其包含元素的宽度。在这种情况下，指定内部元素的宽度是多余的。一般来说，在布局中使用显式指标比使用百分比更好(也更少令人困惑)。

总结得很好

Answer 2

@nvcode;首先div是block元件&block元素默认占用parent元素的全部宽度。所以，如果你给它padding & margin不会影响它的结构。但是由于某种原因你定义了width:100% &如果你想要padding，那么你可以使用box-sizing: border-box属性。

div{
        width:100%;
        padding-left:2%;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
}

检查这个http://www.quirksmode.org/css/box.html