关于盒子模型的样式问题

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 在不同浏览器下表现不同