05-标准盒模型与怪异盒模型

标准盒模型与怪异盒模型

1、盒子模型（box model）

在HTML中，可以把元素看做盒子，盒子包括：实际内容（content）、内边距（padding）、
边框（border）、外边距（margin），图片如下：

2、标准盒模型与怪异盒模型的区别

• 标准盒模型（W3C盒子模型），设置的width或height是对 实际内容（content）的width或height进行设置，内容周围的border和padding另外设置，即盒子模型的width（height）=设置的content的宽高+padding+border+margin
  注：除内容content外，其他为上下左右都有

• 怪异盒模型（IE盒子模型），设置的width或height是对 实际内容（content）+内边距（padding）+边框（border）之和的width和height进行设置的，其盒模型的width（height）=设置的width（height）+外边距margin

**例子：**如下图所示

1、解决两者的兼容问题

可尝试对父元素使用内边距，对子元素使用外边距

2、盒模型的box-sizing属性：

2、盒模型的box-sizing属性：

CSS3新增了一个属性box-sizing: content-box / border-box / inherit，默认值为content-box。如果值为content-box，那元素遵循的是W3C盒模型；如果值为border-box，那元素遵循的是IE盒模型；如果值为inherit，该属性的值应该从父元素继承。