box-sizing属性，摘记

盒子模型介绍

参考：http://blog.csdn.net/y491887095/article/details/52554151

参考：http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html

正常盒子模型（content-box）：正常盒模型的大小会以内容优先自动扩展，内部子元素超过父元素给定的大小，会将父元素撑大。

怪异盒子模型（border-box）：更通俗的说，怪异盒模型中，父元素的盒模型确定，子元素是无法撑开父元素的盒模型，只能在盒模型剩余空间展示。

全局设置方式

参考：https://www.zhihu.com/question/23143701

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

代码解释：

是让所有的元素都使用 border-box ，并且包括 伪类 before, after 。并不是特殊的定义它们俩。

before,after 默认的display 是 inline， 但难免有人会把它变成 block 来用，这时候统一box-sizing 会好操作一些。