之前面試碰到過幾次，有些企業會問盒子模型得區別在**，當時就是一臉懵，很是尷尬啊，用慣了webstorm自動提供的html頁面，都不知道該怎麼區別盒模型了。。。。
好了，廢話不多說，經過我一番學習，原來盒子模型分為ie盒子模型和標準w3c盒子模型。
所有得盒子模型都包含4大塊margin、border、padding、content，不同點在於ie的盒子模型中的content包含了padding和border，可能這樣說還不夠明確，直接上例子：
假如我有乙個盒子margin：10px；border：1px；padding：10px；width：200px；height：200px;那麼：
ie盒子模型的佔據位置寬：10*2+200 = 220px，高：10*2+200 = 220px；那麼ie盒子的實際寬高是：寬200px，高200px。
標準w3c盒子模型佔據位置寬：10*2+1*2+10*2+200 = 242px，高：10*2+1*2+10*2+200 = 242px；那麼標準w3c盒子的實際寬高是：寬222px，高222px。
那麼問題來了，我該怎麼做才能選定標準的w3c的盒子模型呢。很簡單，就是在網頁的頂部加上 doctype 宣告。假如不加 doctype 宣告，那麼各個瀏覽器會根據自己的行為去理解網頁，反之亦然。
標準盒子模型和IE盒子模型的區別
盒子模型是css中很重要的乙個概念，裡面包含了內容 content 內邊距 padding 邊框 border 外邊距 margin 標準盒子模型 box sizing content box 盒子的內容不包括padding和border，那麼盒子的width content。比如你給乙個盒子100...
標準盒子模型和IE盒子模型的區別
css盒子模型 又稱為框模型 box model 包含了元素內容 content 內邊距 padding 邊框 border 外邊距 margin 幾個要素。圖中的內層是content依次是padding border margin，如下圖 w3c 盒子模型的範圍包括 margin border p...
CSS 標準盒子模型和怪異盒子模型的區別
一 什麼是盒子模型 box model 盒子想必大家都是知道的吧！生活中我們的快遞有盒子包裝著，買的蛋糕也是有盒子包裝著，我們的禮品也是被盒子包裝著。模型是什麼呢？它是主觀意識借助實體或者虛擬表現構成客觀闡述形態結構的一種表達目的的物件 css中的盒子模型它是可以對元素進行布局，設定距離的大小，這裡...