面试基础必问之盒模型（W3C标准盒模型即box-sizing: content-box 及IE怪异盒模型即box-sizing: border-box；）

在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：

width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。

CSS3指定盒子模型种类
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

• box-sizing: content-box;盒子模型为W3C（标准盒模型）

  • 在宽度和高度之外绘制元素的内边距和边框。
  • width 和 height 指的是内容区域的宽度和高度。
  • 增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸

• box-sizing: border-box;盒子模型为IE盒子模型（怪异盒模型）

  • 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
  • width 和 height 指的是内容区域+border+padding的宽度和高度。
  • 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

• box-sizing: inherit; 规定应从父元素继承 box-sizing 属性的值。

盒模型和IE盒模型的区别：内边距、边框是如何影响盒子大小及盒子内容大小
图片加强记忆

参考或引用文章：
https://www.cnblogs.com/qianguyihao/p/7256371.html
https://www.imooc.com/article/68238