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

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

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

IE6/IE7+/Firefox 的最级宽度 = [color=darkred][b]左外边距 + 左边框宽 + 左内边距 + 宽度 + 右内边距 + 右边框宽 + 右外边距[/b][/color]

[color=red]
[b]上下margin叠加问题[/b][/color]
假设 #a ,#b是两个div

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

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

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

[color=red][b]左右margin加倍问题[/b][/color]
当我们的盒对象为浮动状态时，在[b]IE6[/b]中，盒对象的[b]左右margin[/b]会加倍。
这是IE6的CSS解析问题，我们可以通过设置对象的 [b]display:inline;[/b] 来解决。
[color=green]
注： display属性用于强制对象按一种显示模式进行解析。[/color]