盒模型一般包含 content（內容）、padding（內邊距）、border（邊框）、margin（外邊距）。
標準盒模型指的是w3c標準下的盒模型，而怪異盒模型指的是ie下的盒模型，也可以通過設定 box-sizing 屬性來改變盒模型，border-box 為怪異盒模型，border-content 為標準盒模型。
差異如下：
標準盒模型下設定的高寬就是 content 高寬，也就是說設定 padding border margin 都會把盒子往外撐大。
而怪異盒模型下設定的高寬是 content + padding + border 的高寬，只有 margin 會把盒子往外撐大，而修改 padding 和 border 會壓縮內容。
將上面的盒子轉換為怪異盒模型：
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...
標準盒模型與怪異盒模型
1 盒子模型 box model 在html中，可以把元素看做盒子，盒子包括 實際內容 content 內邊距 padding 邊框 border 外邊距 margin 2 標準盒模型與怪異盒模型 對比兩種模型的區別 1.標準盒模型 標準盒模型 w3c盒子模型 設定的width或height是對 實...
標準盒模型 怪異盒模型
盒子模型的組成 盒子模型一般由 內容 content 邊框 border 左右外邊距 margin left margin right 左右內邊距 padding left padding right 這些部分組成。css中盒子模型分為兩種 w3c標準盒模型和ie標準盒模型 標準盒子模型 標準盒模型...