1捉捅、盒子模型（box model）（分為怪異盒模型即IE盒模型和標準盒模型）
在HTML中，可以把元素看做盒子虽风，盒子包括：實際內(nèi)容（content）棒口、內(nèi)邊距（padding）、邊框（border）辜膝、外邊距（margin）
怪異盒模型
標準盒模型
1.標準盒模型
標準盒模型（W3C盒子模型）无牵，設(shè)置的width或height是對 實際內(nèi)容（content）的width或height進行設(shè)置，內(nèi)容周圍的border和padding另外設(shè)置厂抖，即盒子模型的width（height）=設(shè)置的content的寬高+padding+border+margin
注：除內(nèi)容content外茎毁，其他為上下左右都有
2.怪異盒模型
怪異盒模型（IE盒子模型），設(shè)置的width或height是對 實際內(nèi)容（content）+內(nèi)邊距（padding）+邊框（border）之和的width和height進行設(shè)置的忱辅，其盒模型的width（height）=設(shè)置的width（height）+外邊距margin
解決兩者的兼容問題
可嘗試對父元素使用內(nèi)邊距七蜘，對子元素使用外邊距
3、box-sizing的應(yīng)用
box-sizing 屬性允許您以特定的方式定義匹配某個區(qū)域的特定元素墙懂。（個人認為可以理解為指定盒模型的類型橡卤，即上述兩種類型）
box-sizing值為content-box時：寬度和高度分別應(yīng)用到元素的內(nèi)容框，在寬度和高度之外繪制元素的內(nèi)邊距和邊框垒在。（即 標準盒模型）
box-sizing值為border-box時：為元素設(shè)定的寬度和高度決定了元素的邊框盒蒜魄，就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制场躯，通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度谈为。（即 怪異盒模型）
box-sizing值為inherit時：規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。
