CSS3 box-sizing

box-sizing用来改变css盒模型，从而改变元素计算宽高的方式。

##语法##

box-sizing: content-box | padding-box | border-box | inherit

##值## content-box默认值，标准盒模型。width和height内容区的宽与高，不包括边框，内边距，外边距。

padding-box width和height包括内容区和内边距，不包括边框，外边距。

border-box width和height包括内容区、内边距和边框，不包括外边距。IE 怪异模式（Quirks mode）使用的盒模型。

border-box和content-box相比，明显宽高计算简单（再也不用费心计算padding多少才不会撑开布局），一般广泛应用于响应式布局中。

##Reset box-sizing##

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

一般都是通过以上代码来reset box-sizing。然而这样写有一个明显的问题：box-sizing不能继承（若某一元素及其子元素的box-sizing需要设置成其他的值，就必须为其所有的元素单独设置）。于是就有了下面这种替代方案。

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

参考：MDN box-sizing