CSS:100% 宽度和边距

Question

请看例子

http://jsfiddle.net/cne94hw4/

.a{
      width: 100%;
    background-color: #eee;
    margin-left: 200px;
}

我原以为“宽度 100%”将意味着 100% 的窗口，但很明显，当我为其添加边距时并不是这样。我发现这很难理解。

框和边距的确切关系是什么？这有什么成文规定吗？

Answer 1

您的问题是关于 CSS Box 模型的，在 CSS 规范中有详细描述:http://www.w3.org/TR/CSS2/box.html

简而言之，width 定义内容框的宽度。如果你添加填充，边框和边距，则 block 框的总宽度是内容框的宽度加上由填充、边框和边距引起的任何宽度。

至于高度，padding 和 border 宽度被添加到整个高度堵塞。但是，边距可以与相邻 block 的边距一起折叠，这是另一个要看的主题(参见:collapsing margins)。

另一个概念是 block 格式化上下文，如果您处理可能 float 或定位的元素。

在您的示例中，a 元素的总宽度为 100% 加上 200px，因为左边距。

最后，您可以通过使用 box-sizing 属性来控制宽度的计算方式。