css盒模型

css盒模型-又一个经久不息的话题，面试的时候，有的面试官会让你谈谈css的盒子模型，这样看似简单的问题，却让一些同学，无从下口。其实你不是不会，在写css的时候，你肯定经常会用到margin，padding，width，box-sizing这样的css属性。只不过类似于这样的问题，范围较广，又没有标准答案，一时回答不上来，却影响了面试结果，实在不应该啊。

本文就css盒子模型的概念，用法回答面试官的问题。

首先，怎么理解盒子模型，就是要把设置距离的html元素看成一个盒子，这个盒子由margin；border；padding；content这些css属性组成。

这就是一个盒子

只不过让我们称之为模型的是，根据css属性box-sizing值不同。css盒模型可以分为标准盒模型和ie盒模型；当box-sizing值为：content-box时为标准模型，当box-sizing值为：border-box时为ie模型；这二者的区别很简单，见下图

仅仅只是width的计算方式不同而已

所以有些面试官就问了：盒模型中标准模型和ie模型有什么区别？你会回答了吧；

所以在项目中，如果你要用某种模型，用box-sizing设置成某种模型即可；