css中的盒子模型

1、盒子模型：CSS中规定盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成。

2、盒模型分为IE盒模型和W3C标准盒模型，区别是：

• W3C 标准盒模型：属性width,height只包含内容content，不包含border和padding。

• IE 盒模型：属性width,height包含border和padding，指的是content+padding+border。

3、相邻盒子之间margin的计算规则：

• 水平方向的盒子，两者距离为margin之和
• 垂直方向的盒子，两者距离为margin的最大值

4、解决margin元素塌陷问题：

• 同级元素塌陷：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分
• 父子元素塌陷(也叫外边距塌陷)：
  给父元素设置border-top或者padding-top（分割父子元素的margin-top）
  给父元素设置overflow: hidden
  给父元素转换成行内块级元素 display: inline-block
  给父元素或子元素增加浮动
  给父元素或者子元素添加绝对定位或者固定定位

5、W3C标准中盒模型或者在ie8+浏览器中使用哪个盒模型可以由box-sizing(CSS新增的属性)控制，默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则用的是IE盒模型。

6、如果在ie6,7,8中DOCTYPE缺失会触发IE模式，我们在编写页面代码时应尽量使用标准的W3C模型(需在页面中声明DOCTYPE类型)，这样可以避免多个浏览器对同一页面的不兼容。