主要有两种盒模型:
IE盒模型和标准盒模型。
CSS3的box-sizing可以定义使用哪种盒模型。
IE盒模型的box-sizing为border-box;
标准盒模型的box-sizing为content-box;
为了方便,通常使用border-box。
外边距叠加:
垂直方向的两个相邻元素的外边距会发生叠加,叠加后的外边距为两者中外边距的最大值。
这样设计的意义:保持各个块之间上下间距的距离一致性,比如多个段落之间与顶部底部的边距保持一致。
只有普通文档流中的垂直外边距会发生叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。
事先将margin和padding清0:
在CSS代码中,可以设置
*{
margin:0;
padding:0;
}
将所有预定义(用户代理样式表设置)的margin和padding设置为0,覆盖这些浏览器默认样式。
事先定义盒模型的尺寸解析模式:
box-sizing: content-box |border-box|inherit;
content-box(W3C标准,元素的宽度不包括border和padding)
border-box(IE6以下标准,元素的宽度包括border和padding)
inherit(继承父元素);