閑來無事，回顧總結一些基礎知識
通常在頁面布局中，需要設定元素的寬高，但由於某些歷史原因，不同瀏覽器對於開發者設定的元素寬高有不同的解析方式
在IE中（也就是怪異模式），塊元素的width = content + padding + border；比如設定元素width = 100px，padding = 10px，那么實際的內容區域寬度為100-10*2px，也就是固定寬度后，如果設定border或者padding會壓縮內容區的寬度；
在W3C標准中，元素的width = content，比如設定元素width = 100px，padding = 10px，那么實際內容寬度就為100px；整個元素的寬度為100+10*2px，也就是設定額外的padding或border會向外擴張元素的大小；
在實際的開發中，為保持瀏覽器的兼容性，通常將盒子模型統一為IE的盒子模型，並且這樣的方式有利於布局
轉換的方式為：box-sizing: border-box; 另外box-sizing屬性還有inherit和content-box兩個值，后者即為W3C盒子模型
參考：https://www.w3.org/TR/CSS21/box.html