在了解這兩種盒模型的區別之前首先我們要先了解什麼是盒模型（box-mold），盒模型顧名思義就是在css中的盒子，把html的元素封裝成盒子用來設計和布局時使用，盒模型中又包含了以下幾個元素：
（1）內容（content） （2）填充（padding）
（3）邊框（border） （4）邊距（margin）
詳細說明：
內容（content）：盒子的內容，主要用來顯示文字和影象。
填充（padding）：也叫內邊距，用來清除內容周圍的區域，它是透明的。
邊框（border）：圍繞在內邊距和內容外的邊框，盒子的外殼。
邊距（margin）：也叫外邊距，用來清除邊框外的區域，它跟填充一樣都是透明的。
為了方便理解我們可以把盒模型比喻成一箱酸奶，內容就是箱子裡的酸奶，內邊距就是酸奶與箱子之間的泡沫板，邊框就是我們的箱子，外邊距就是我們從一箱酸奶到另一箱酸奶之間的距離。
標準盒模型
標準盒模型就是w3c的標準盒子模型
內盒尺寸（大小）=width+padding+border
外盒尺寸（空間尺寸）= width+padding+border+margin
怪異盒模型
怪異盒模型就是ie盒模型
內盒尺寸（大小）=width
外盒尺寸（空間尺寸）= width+ margin
知道這些之後怪異盒模型與標準盒模型的區別顯而易見了，它們兩個寬度相加的屬性是一樣的。不過在ie中content的寬度包括padding和border這兩個屬性。如下圖所示：
標準盒模型和怪異盒模型之間的轉換：box-sizing :content-box/boeder-box/inherit ;
當為content-box時，將採取標準模式進行解析計算;
當為border-box時，將採取怪異模式解析計算;
當為inherit時，將從父元素來繼承box-sizing屬性的值;
逆戰班標準盒模型與怪異盒模型的區別
宣告 本人學識有限，文中如有錯誤或不當之處，請各位指出，謝謝！總長 width padding 左右 border 左右 margin 左右 這裡的width就是內容區了，是書寫顯示的區域，也就是下圖中a的長度。在標準盒模型中，當width不變時，padding 左右 和borde 左右 的改變都是...
標準盒模型與怪異盒模型
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標準盒模型 標準盒子模型 標準盒模型...