标准盒模型VS怪异盒模型

一，原理
css 属性：Box Moel分为两种：W3C标准和IE标准盒子模型。
大多数浏览器采用W3C标准模型，而IE中采用Microsoft自己的标准。
怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。
当不对Doctype进行定义时，会触发怪异模式。

在标准模式下，一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)

在怪异模式下，一个块的总宽度=width+margin（左右）（既width已经包含了padding和border值）

image.png
image.png

二，用法(css3的box-sizing)

box-sizing:content-box || border-box || inherit;

当设置为box-sizing:border-box时，将采用怪异模式解析计算；