前端面试宝典 每日一题（5）IE盒模型与Chrome盒模型（正常盒模型和怪异盒模型）的区别？

🧑🏻‍写在前面的话：
这个系列文章可能开始，有人会觉得很low，我是打算从H5先开始整理，最后到常见的前端框架、以及一些前端常见的算法、leetcode的一些算法解析，感兴趣的小伙伴可以持续关注，每天分享一个前端知识点，希望大家一起进步。

IE盒模型与Chrome盒模型（正常盒模型和怪异盒模型）的区别？

正常盒子模型和怪异盒子模型，在面试过程中也是一道比较基础的题目，可能很多人会忽视掉这些细微的点，但是我个人认为这些小细节还是比较重要的，我们只有有了牢固的基础才能谋求更大的进步。

介绍
盒模型是CSS中重要的一个概念，但是在以前IE5.5以及更早的IE浏览用的不是标准盒模型，我们称之为IE盒模型。

区别：

两者的区别在于content的不同，IE盒模型的content包括border、padding。

从这两张图片中我们更能清晰的看出两着直接的区别，在css3中也新增了关于区别盒子模型的语法，如下：

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

关于这三个取值的说明：

1. 当使用content-box时：页面将采用标准模式来解析计算，content-box也是默认模式

2. 当使用border-box时，页面将采用怪异模式解析计算，怪异模式也称为IE模式

3. 当使用inherit时：页面将从父元素继承box-sizing的值

这就是怪异盒模型和正常盒模型的区别，此特性在自适应的网页会非常好用，因为它不会破坏网页的结构。