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;
        }