CSS系列之盒模型的理解，标准盒模型和怪异盒模型有什么区别

[yuanyuanbyte]

什么是盒模型？

盒模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。

标准盒模型和怪异盒模型有什么区别？

我们目前所学习的知识中，以标准盒子模型为准。

标准盒子模型：

IE盒子模型：

IE盒子模型（怪异盒子模型）

区别：

标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

标准盒模型声明的元素宽度width = content(宽度)

IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。元素内容的宽度和高度是由已设定的宽度和高度分别减去边框和内边距后得到的。

IE盒模型声明的元素宽度width = content(宽度) + padding(左右宽度) + border(左右宽度)

两者的声明使用：

现代浏览器默认使用W3C的标准盒模型，但是在不少情况下怪异盒模型更好用，于是W3C在css3中加入box-sizing：

box-sizing: content-box // 标准盒模型

box-sizing: border-box // 怪异盒模型

一句话总结就是：

标准盒模型的内容大小就是content的大小，而ie盒模型的大小则是content+padding+border总的大小。