盒子模型与box-sizing

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

W3C盒子模型(标准盒模型)

IE盒子模型(怪异盒模型)

css3中的box-sizing 改变盒子模型的组成方式

语法：box-sizing ： content-box | border-box | inherit

相关属性 ： 无

content-box

此值维持css2.1盒模型的组成模式，border|padding|content {element width=border+padding+content}

padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )此属性表现为标准模式下的盒模型。

border-box

此值改变css2.1盒模型组成模式，content|border|padding {element width=content}

padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )此属性表现为怪异模式下的盒模型。