首先大概說說正常盒模型和怪異盒模型的區別：
1.用途：正常盒模型主要用於pc端，怪異盒模型主要用於手機端。
2.原理：正常盒模型的大小是由內到外的，由內部決定外部的大小；而怪異盒模型是由外而內的。
舉例說明：
以下為正常盒模型，設定兩個div，分別為鞋盒和鞋子
鞋子
鞋子
設定樣式如下：
body
div[class ^= "hezi"]
div[class ^= "xiezi"]
我們發現當我們設定好鞋子的大小的時候，只需要設定下盒子的寬度（因為是塊級元素所以必須設定寬度），如果是行內元素的話，我們並不需要設定盒子的大小。
如下是怪異盒子的css樣式：
div[class ^= "hezi2"]
設定怪異盒模型：只需要將盒子的 box-sizing設定為border-box，這是我們發現盒子的大小不在隨鞋子（內容）的大小而改變，而是必須由盒子自己來控制它的大小。
1 盒模型和怪異盒模型
標準盒模型 一 標準盒模型模擬 當我們在學習h5前端的時候，首先應該了解的是盒模型的結構，這樣在寫頁面的時候才不會結構不清除，導致屬性設定起來不明白，只是試出來，卻不懂底層的原理。首先可以先在html中寫個div，然後給div加上width，height background 設定好之後在谷歌瀏覽器...
標準盒模型和怪異盒模型
ie盒模型 怪異盒模型 和標準盒模型的區別就是，ie盒模型中width和height除了content區域外，還包含padding和border。盒子的總寬度為乙個塊的總寬度 width margin 左右 即width已經包含了padding和border值 在標準盒模型下，width和heigh...
標準盒模型和怪異盒模型
盒子模型眾所周知，這裡先簡單介紹一下。可以看到，在標準盒模型 box sizing content box 下，width和height是內容區域即content的width和height。而盒子總寬度為 在標準模式下，乙個塊的總寬度 width margin 左右 padding 左右 borde...