box-sizing用法

在我们讨论宽度的时候，我们应该讲下与它相关的一个重点知识：盒模型。当你设置了元素的宽度，实际展现的元素却能够超出你的设置：因为元素的边框和内边距会撑开元素。看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。相信你一定遇到过这样的情况。

向上面的两个div一样，simple和fancy的width都是500px，但是fancy比simple要宽，因为fancy有padding：50px;所以看起来比simple要宽，但是要怎么消除这个因素呢？

有两种方法，第一种就是用数学的思想，用宽度减去padding的宽，剩下的书就是fancy的width;另一种方法就是box-sizing：border-box属性。

一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上：

*{-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;}

这样可以确保所有的元素都会用这种更直观的方式排版。