CSS Box模型宽度问题

Question

我是CSS的新手。 首先请看一下这个简单的两列布局。

http://www.vanseodesign.com/blog/demo/2-col-css.html

我想问为什么内容的宽度+边栏的宽度= / =容器的宽度？

Answer 1

内容宽度= 610px

内容中的填充宽度= 5 + 5 = 10px

内容的总宽度= 620px

同样，带有填充的边栏的总宽度= 340px

所以总内容和边栏= 620 + 340 = 960px，等于容器的宽度！

Answer 2

W3C规范说盒子的宽度是：边距+边框+填充+宽度。 这样，您将能够确定实际的盒子宽度。

如果求和结果框的宽度，则结果将等于容器的宽度。

Answer 3

没有看到您的代码，很难给您答案。 但是下面是一些基本的CSS和html，它将为您提供一个与标题大小相同的内容区域，请在此处查看实际操作http://jsfiddle.net/peter/wZQNY/

CSS

.container{
    margin:0 auto;
    width:960px;
}
.header{
    width:100%;
    background:#eee;
}
.content{
    width:100%;
    background:#ccc;
}

HTML

<div class="container">
    <div class="header">header navigation</div>
    <div class="content">page content</div>
</div>

Answer 4

我看不到问题。 在您的链接中，content.width + sidebar.width == container.width

你怎么了？ 你使用的是什么浏览器？

---

一个可能的解决方案是，由于边框或边距，您可能会有一些奇怪的行为，为此，您应该应用CSS Reset 。