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定义了内容框的宽度。如果添加填充，边框 和边距，然后块框的总宽度是内容框加上的宽度 由填充，边框和边距引起的任何宽度。

至于height，填充和边框宽度被添加到整体的高度 块。然而，边距可以随着相邻区块的边缘而崩溃，这是 另一个要查看的主题（参见：折叠边距）。

另一个概念是块格式化上下文，如果您发挥作用，它就会发挥作用 处理可能浮动或定位的元素。

在您的示例中，由于a元素的总宽度为100％加上200px 左边缘。

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

Answer 2

width: 100%' does mean您的示例文档的100％，但您也设置了边距，这是限制元素宽度的因素。看看你删除后会发生什么。

Answer 3

尝试以下

.class{  
   width:100%;
   padding-left:200px;
   box-sizing:border-box;
}

保证金可以立即增加额外的空间。