盒模型-形象的解释标准盒子（content-box）和怪异盒子（border-box）

如果面试官让我解释一下什么是盒模型？我会这样回答：

首先一个盒子的大小就是包括盒子的内容（content）+内边距（padding）+边框（border）。而盒子的模型有两种，区别就是宽高和内容的关系；

一种是默认盒子/标准盒子（box-sizing:content-box）顾名思义这个盒子的内容就是宽高，所以整个盒子=宽高+内边距+边框；

而另一种怪异盒模型（box-sizing:border-box）顾名思义这个盒子从边框算起才是宽高=整个盒子的内容+内边距+边框

我做了所有大小参数都一样但是颜色和盒模型不一样的两个盒子。css代码如下：

.red {
  box-sizing: content-box;
  background-color: red;
  width: 300px;
  height: 300px;
  padding: 20px;
  border: 5px solid #000;
  margin: 10px;
}
.green {
  box-sizing: border-box;
  background-color: green;
  width: 300px;
  height: 300px;
  padding: 20px;
  border: 5px solid #000;
  margin: 10px;
}

先看红色的盒子（默认盒模型box-sizing:content-box）

解析：这里的宽高就是等同于内容（content），盒模型大小=（content+padding+border）=300+（20+5）2=350，最终就是350350px；

再看绿色的盒子（怪异盒模型box-sizing：border-box）

解析：这里的宽高等同于整个盒模型的大小，盒模型大小=（content+padding+border）=300px，所以可以算出content=300-（20+5）=250，所以content就是250*250px；

总结：定义一个盒子就是包括，border+padding+content的总大小就是盒子的大小。标准盒子（box-sizing:content-box）所写的宽高是content本身，而怪异盒子（box-sizing:border-box）所写的宽高是总的盒子（包括padding和border）；

其实从字面意思标准模型的content-box就已经表明了宽高就是content，而怪异盒子的border-box表明了宽高包括border开始算起