我的回答

标准盒模型(现代浏览器), 盒模型宽高不包含padding和margin以及border
怪异盒模型(IE), 盒模型宽高包含padding和margin以及border

参考回答

盒模型的概念

margin、border、padding、content。

在网页中，一个元素占有空间的大小由几个部分构成:

  1. 其中包括元素的内容(content)
  2. 元素的内边距(padding)
  3. 元素的边框(border)
  4. 元素的外边距(margin)

这四个部分占有的空间中，有的部分可以显示其相应的内容，而有的部分只用来分割相邻的区域, 这4个部分一起构成了css中元素的盒模型。

盒模型的分类：标准模型、IE模型

标准模型IE模型的区别：计算高度和宽度的不同

  • 标准盒模型： width = content; padding, border, margin要另外设置, 设置box-sizing: content-box;
  • 怪异盒模型/IE盒模型： width = content + padding + border; 设置box-sizing: border-box;