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

在W3C标准下，我们定义元素的width值即为盒模型中的content的宽度值，height值即为盒模型中的content的⾼度值。

因此，标准盒模型下：

元素的宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

⽽IE怪异盒模型（IE8以下）width的宽度并不是content的宽度，⽽是border-left + padding-left +content的宽度值 +padding-right + border-right之和，height同理。

在怪异盒模型下：

元素占据的宽度 = margin-left + width + margin-right

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

box-sizing: content-box // 标准盒模型
box-sizing: border-box // 怪异盒模型
box-sizing: padding-box // ⽕狐的私有模型，没⼈⽤