盒模型中的宽度和margin问题_CSS网站布局实录笔记

kenbli

在CSS的盒模型设计中，它的宽度和高度不仅仅由width或者height来提供，而是由一组属性值组合而成。

相关属性：宽度(width)，高度(height)，内边距(padding)，外边距(margin)，边框(border)

IE6/IE7+/Firefox 的最级宽度 = 左外边距 + 左边框宽 + 左内边距 + 宽度 + 右内边距 + 右边框宽 + 右外边距


上下margin叠加问题
假设 #a ,#b是两个div

情况1 : #a,#b的 margin:10px;时，它们的上下margin会叠加，即上下距离是10px，而不是20px;

情况2 : #a的 margin:30px;,#b的 margin:10px;，这时它们的上下margin也会叠加，即上下距离是30px;

注意: 一旦把某个元素设定了float属性，那么它们将不再进行空白叠加。

左右margin加倍问题
当我们的盒对象为浮动状态时，在IE6中，盒对象的左右margin会加倍。
这是IE6的CSS解析问题，我们可以通过设置对象的 display:inline; 来解决。

注： display属性用于强制对象按一种显示模式进行解析。