读The CSS Box Model有感

读The CSS Box Model有感   http://my.oschina.net/limichange/blog/72992

看到网上有一篇深入理解盒模型的文章，也想自己动手写一下自己的理解，但是本人菜鸟一枚，所写的东西也是记录自己的历程，不喜勿喷。

首先我觉得要理解盒模型首先我们的知道它怎么决定了一个元素的最终尺寸，继而帮助我们把这个元素在网页上定位。

1.      没有position（position:static）或者position:relative，没有设置内容块的宽度时

会受父元素的宽度影响，内容太多还会溢出，但是父元素的宽度不会变化，没有设置父元素时父元素就是body。用父元素减去这个元素的外边距，边框，内边距，和scrollbar，剩下就是它的宽度，因为它会自动填充。

2.      position:absolute或者position:fixed  或者设置float时

会忽视父元素的宽度，内容有多少就有多宽

在IE6和更早的浏览器版本中，一个没有声明宽度的浮动元素还是会收缩紧贴住它的内容作为一种默认的设置,除非子元素有自己的布局(has a layout)

当一个浮动元素（没有声明宽度）包含一个向右浮动的子元素时，它同样也会自动的延伸填充，以适应父元素的可用内容的宽度。这种情况在之前的IE浏览器，包括IE7中都是存在的(之前的Firefox，

包括2.0版本中也存在这个bug,但是这个问题在Firefox3.0 Alpha 6版本中已经得到了解决)。

3.      如果一个元素仅仅包含浮动或者绝对定位的元素，它没有一丁点的内容，那么它的高度将为0。我们将在Floating and Clearing做更多讨论。

4.      非常值得注意的一点是，当一个元素的宽度被设置为100%时(也就是说父元素的内容宽度是100%)，它不应该有任何的外边距，内边距，或者是边框，这只会使它放置的区域需要更大的面积。这通常会被设计师们所忽略忽略并且很严重的扰乱了页面的布局，这样的话内容要么溢出要么使元素比他们应该的样式更宽。

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