盒模型中的宽度和margin问题_CSS网站布局实录笔记
在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属性用于强制对象按一种显示模式进行解析。
页:
[1]