HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成,即内容区(content)、填充(padding)、边框(border)和空白边(margin)。
盒模型可以分为两种:标准盒模型、IE 盒模型/怪异盒模型。
- 标准盒模型
请注意:content被包含在盒子子内层
总宽度(外盒尺寸宽)= margin + border + padding + width
总高度(外盒尺寸高)= margin + border + padding + height
盒子实际宽度(内盒尺寸宽): border + padding + width
盒子实际高度(内盒尺寸高): border + padding + height
- IE盒模型(IE6以下,不含IE6版本或“QuirksMode下IE5.5+”)
根据上图我们看到ie盒子下的content包含padding和border
总宽度(外盒尺寸宽)= margin + width
总高度(外盒尺寸高)= margin + height
盒子实际宽度(内盒尺寸宽): width
盒子实际高度(内盒尺寸高): height
由于这两种不同的情况,会导致在不同浏览器下有不同的表现,css3引入了box-sizing
下面看box-sizing的属性值
box-sizing : content-box || border-box || inherit
取值说明
1、content-box:此值为其默认值,其让元素维持W3C的标准Box Model。
2、border-box:此值让元素维持IE传统的Box Model(IE6以下版本),也就是说元素的宽度/高度等于元素内容的宽度/高度。
所以,当我们设置 box-sizing: border-box; 时,border 和 padding 就被包含在了宽高之内,所以,为了避免你同一份 css 在不同浏览器下表现不同