盒模型

盒模型

主要有两种盒模型：

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（继承父元素）;