什么是盒子模型？

页面中所有的html元素都可以当做一个盒子，一个盒子有它自己的内部空间，边框厚度以及对外的间距，css盒子模型也包括四部分：content,padding,border,margin。

盒子模型有两种：

  • 标准浏览器盒子模型——W3C
  • IE浏览器盒子模型——微软IE

标准盒子模型：盒子宽高 = 内容区域 content宽高

面试题五:什么是盒子模型？IE的盒子模型有什么特殊之处？-QUI-Notes

IE盒子模型：  盒子宽高= 内容区域 content宽高 + 填充区域padding  + 边框区域border

面试题五:什么是盒子模型？IE的盒子模型有什么特殊之处？-QUI-Notes

区别在于ie的盒子模型包括了padding和border，而标准的盒子宽度就是盒子宽度，padding和border也都是单独一部分。

box-sizing —— 标准盒子模型和IE盒子模型之间转换方式

标准盒子的模型 ：
box-sizing: content-box; 默认的，给IE加上，就可以将ie的怪异模型变为标准盒子模型；
当然，也可以全部兼容ie的模型，box-sizing: border-box 酱紫所以的浏览器都会按照ie的盒子模型，边框border和填充padding都被包含在宽高内！

也就是说，标准盒子比ie盒子大，ie把边框和填充吞了！