面试官：请说说你对与css盒子模型的理解。

我们回答的时候应该分为以下三点来说

• 盒子模型的概念
• 盒子模型的组成
• 盒子模型的分类

盒模型的概念

在HTML中，可以把元素都看做盒子，比如div、h1~h6、p

盒子的组成

一个元素占有空间的大小由几个部分构成，其中包括

元素的内容（content）

元素的内边距（padding），内容与边框之间的距离

元素的边框（border），

元素的外边距（margin），边框与外部元素之间的距离

盒模型的分类（最重要的部分）

标准盒模型 (W3C盒子模型)

怪异盒模型 (IE盒子模型)

说到盒子的分类，在这之前，我们要知道什么是box-sizing，引用W3C网站上的定义

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

简单来说就是可以通过box-sizing的取值来切换盒模型，它的取值可以为content-box、border-box；

box-sizing的默认属性是content-box。

两个模型的不同点

标准盒模型	怪异盒模型
增加padding,border会将盒子撑开	不会被撑开，增加padding，border只会让content的宽高更小

下面就介绍content-box与border-box；

W3C标准盒子（content-box）：又称内容盒子，是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box。它所说的width一般只包含内容，不包含padding与margin，并且盒子的大小会以内容优先，自动扩展，子元素可以撑开父元素.

可以理解为现实生活中的气球，大小可以随内容的变化而变化。

在这种盒模型下，我们所说的元素的 width ，实际上只包含 content

盒子总宽度 = margin + border + padding + width

IE盒子（border-box）：又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为这种怪异盒模型，但是由于其自身的特殊性，手机页面中也有使用怪异盒模型。怪异盒模型中，父元素的盒模型确定，子元素无法撑开父元素的盒模型。

可以理解为现实生活中的铁箱子，大小不能被内容改变。

在这种盒模型下，我们所说的元素的 width ，实际上包含了 content + padding + border

盒子总宽 = margin + width

---

说完两种盒模型的区别，现在我们可以通过实例来看看它们的具体的不同

demo:

一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;

现计算出两种盒子模型下盒子的宽高。

W3C标准盒子：

盒子占用空间的宽高：（在浏览器页面所占空间）

Width = 200 + 102 + 102 + 20*2 = 280 px;
Height = 50 + 102 + 102 + 20*2 = 130 px;

盒子的实际宽高：

Width = 200 + 102 + 102 = 240 px;
Height = 50 + 102 + 102 = 90 px;

IE盒子：

盒子占用空间的宽高：（在浏览器页面所占空间）

Width = 200 + 20*2 = 240 px;
Height = 50 + 20*2 = 90 px;

盒子实际宽高：

Width = 200 px;
Height = 50 px;

由数据可以看出，同样的数据下，border-box是比content-box要小的。

显示效果：
————————————————————————————