CSS增加這3行，盒子模型的內邊距和邊框不再會增加它的寬度

做前端的知道，盒子外觀的寬度=2*border的寬度+2*padding的寬度+內容的寬度。因為，為了外觀的寬度是想要的效果，需要通過麻煩的數學計算。但是，福音來了，加上下面這3行，元素的內邊距和邊框不再會增加它的寬度。

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

測試（下面這2種的樣式，盒子寬度是一樣的）：

        .simple {            width: 500px;            margin: 20px auto;            -webkit-box-sizing: border-box;            -moz-box-sizing: border-box;            box-sizing: border-box;        }        .fancy {            width: 500px;            margin: 20px auto;            padding: 50px;            border-width: 10px;            -webkit-box-sizing: border-box;            -moz-box-sizing: border-box;            box-sizing: border-box;        }