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 。