深入理解CSS盒子模型（4）

没有margin和padding，仅有width情况下的CSS：

以下为引用的内容：

.box

{

background:black;

width:100%;

height:100px;

}

.contain

{

background:yellow;

height:120px;

width:200px;

}

效果如图所示：

可见在没有margin和padding的情况下，100%的内容能恰到好处的填充父元素

一旦加入了margin和padding（margin:10px;padding:10px;）之后效果如图：

在firebug中的布局图：

而加入了margin和padding之后，元素出现了错位，并且只能显示左侧的margin

解决办法是，在大多数情况下，避免给宽属性添加具体的值（绝不是自动），并且只应用外边距，内边距，边框。无定位元素的宽度将会默认为自动。甚至就算定义了内边距，边框，外边距，它仍然会认为可用的内容宽度为全满状态。

当然，这种方法对某些例子可能失效，比如当元素不是无定位元素时，并且它的确需要一个指定的宽度（就像那个浮动元素不会自动填充它父元素的例子一样）。在这些情况下，你有两个选择。

如果可用区域是固定宽度的，你能简单的把每一个属性元素（margin，padding等）的宽度都相加起来以匹配可用的那个固定宽度。举个例子，如果可用的区域宽度是500px，并且你需要一个元素有20px的内边距，简单的把这个元素的宽度设置为460px，内边距为20px（20+460+20=500）。这个办法中先决条件是宽度值和元素盒子属性使用的都是同一测量单位，因为你不希望把混合单位相加起来（200px + 10%，只是举个例子而已，在内容中这样的写法是没有意义的）。

当可用内容区域的宽度是未知的时候——比如在流式布局（fluid layout）中——这个方法是行不通的，因为百分比（percentages）和像素（pixels）不能一起相加。在这种情况下，解决方法应该是为需要的元素声明一个100%的宽度值，并且把内边距，边框，外边距的值都设置到一个嵌套其中的元素中去。这个嵌套元素没有任何的宽度值声明，并且可以在没有干扰父元素的情况下展示需要的内边距，边框，外边距。［注释5］

［注释5］呃，其实这段话我也没有理解……

现在你应该能清晰的理解CSS盒子模型了

后记：由于本人水平有限，可能很多地方翻译的并不是很通俗。只希望能起一个抛砖引玉的作用，有更多的朋友来完善它，指出我翻译和理解不正确的地方。如果时间允许的话，我继续翻译与此相关的一些列文章（即本文中的链接）。

最后向大家推荐Andy Budd、Simon Collision、Cameron Moll写的《CSS Mastery Advanced Web Standards Solutions（Second Edition）》（精通CSS 高级Web标准解决方案第二版），翻译这篇文章时参考了其中不少内容，这也是一本适合CSS进阶类图书，不适合初学者。希望有兴趣的朋友可以参考一下。（来源：Color&Cool）