一、標準盒子模型
可以看到，在標準盒模型下，width和height是內容區域即content的width和height。
在標準模式下，乙個塊的總寬度= width + margin(左右) + padding(左右) + border(左右)
二、ie盒子模型
而ie盒模型或怪異盒模型顯而易見的區別就是，width和height除了content區域外，還包含padding和border。
乙個塊的總寬度= width + margin(左右)（即width已經包含了padding和border值）
1、如何運用
只要在文件首部加了doctype申明，即使用了標準盒模型，而不加，則會由瀏覽器自己決定，比如，ie 瀏覽器中顯示「ie盒子模型」，在 ff 瀏覽器中顯示「標準 w3c 盒子模型」。
當用編輯器新建乙個html頁面的時候最頂上都會有乙個doctype標籤，不定義doctype，會觸發怪異模式
2、怪異盒模型
css3的box-sizing
box-sizing語法：
box-sizing: content-box || border-box || inherit || initial
當設定為box-sizing:content-box時，將採用標準模式解析計算，也是預設模式；
當設定為box-sizing:border-box時，將採用怪異模式解析計算；
一、標準盒子模型
可以看到，在標準盒模型下，width和height是內容區域即content的width和height。
在標準模式下，乙個塊的總寬度= width + margin(左右) + padding(左右) + border(左右)
二、ie盒子模型
而ie盒模型或怪異盒模型顯而易見的區別就是，width和height除了content區域外，還包含padding和border。
乙個塊的總寬度= width + margin(左右)（即width已經包含了padding和border值）
1、如何運用
只要在文件首部加了doctype申明，即使用了標準盒模型，而不加，則會由瀏覽器自己決定，比如，ie 瀏覽器中顯示「ie盒子模型」，在 ff 瀏覽器中顯示「標準 w3c 盒子模型」。
當用編輯器新建乙個html頁面的時候最頂上都會有乙個doctype標籤，不定義doctype，會觸發怪異模式
2、怪異盒模型
css3的box-sizing
box-sizing語法：
box-sizing: content-box || border-box || inherit || initial
當設定為box-sizing:content-box時，將採用標準模式解析計算，也是預設模式；
當設定為box-sizing:border-box時，將採用怪異模式解析計算；
標準盒模型和怪異盒模型
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...
標準盒模型和怪異盒模型
盒模型的組成，由內而外只要由 content，padding，border和margin組成。標準盒模型和怪異盒模型的主要區別就是所包含的內容。標準盒模型的內容就是content的大小 怪異盒模型的內容是content padding border 怪異盒模型的寬 content的寬 padding...