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 。