怪异盒模型和标准盒模型--CSS

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

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

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

 

怪异盒子模型.png

 

标准盒子模型.png

二，用法(css3的box-sizing)
box-sizing语法：

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

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

 

标准盒子模型.png

 

怪异盒子模型.png

链接：https://www.jianshu.com/p/9a3090f1924a