什么是盒子模型?

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

盒子模型有两种:

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

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

面试题五:什么是盒子模型?IE的盒子模型有什么特殊之处?-Qui-Note

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

面试题五:什么是盒子模型?IE的盒子模型有什么特殊之处?-Qui-Note

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

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

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

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