標準盒模型與怪異盒模型

1、盒子模型（box model）

在html中，可以把元素看做盒子，盒子包括：實際內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）

2、標準盒模型與怪異盒模型

對比兩種模型的區別

1.標準盒模型

標準盒模型（w3c盒子模型），設定的width或height是對實際內容（content）的width或height進行設定，內容周圍的border和padding另外設定，即盒子模型的總長（高）width（height）=設定的content的寬高+padding+border

注：除內容content外，其他為上下左右都有

2.怪異盒模型

怪異盒模型（ie盒子模型），設定的width或height是對實際內容（content）+內邊距（padding）+邊框（border）之和的width和height進行設定的，其盒模型的width（height）=設定的content的寬高+padding+border+外邊距margin

1、解決兩者的相容問題

可嘗試對父元素使用內邊距，對子元素使用外邊距

2、box-sizing的應用

box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。

box-sizing值為content-box時：寬度和高度分別應用到元素的內容框，在寬度和高度之外繪製元素的內邊距和邊框。

box-sizing值為border-box時：為元素設定的寬度和高度決定了元素的邊框盒，就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製，通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

box-sizing值為inherit時：規定應從父元素繼承 box-sizing 屬性的值。