盒子模型（框模型）是css部分非常重要的一部分知識，css在處理網頁的時候，認為每個元素都處在乙個不可見的盒子中。盒子模型的構想，把所有的元素都想象成盒子，那麼對網頁進行布局的時候就可以理解為對盒子進行排列。至於要將相應的盒子擺放到網頁相應的位置中即可完成頁面布局。css 盒子模型 (box model) 規定了元素框處理元素內容、內邊距，邊框和外邊距的方式盒子模型包括width寬度，height高度，border邊框，padding內邊距，margin外邊距，content內容這幾個部分。
這些屬性我們可以用日常生活中的常見事物——盒子作乙個比喻來理解，所以叫它盒子模式。
盒子模型主要是針對頁面布局的時候來使用，它規範我們的頁面的所有元素的乙個布局標準是由外向內進行布局。
盒子模型由外向內：margin(外邊距)—>border(邊框)---->padding(內邊距)---->content(元素)
上面所說的盒子模型是基於w3c標準的盒子模型，大多數瀏覽器都採用標準盒模型。而還有一種怪異盒子模型，這種怪異模式主要表現在ie核心的瀏覽器。
除此之外，我們還可以通過屬性box-sizing來設定盒子模型的解析模式
可以為box-sizing賦三個值：
content-box：預設值，border和padding不算到width範圍內，可以理解為是w3c的標準模型(default)
border-box：border和padding劃歸到width範圍內，可以理解為是ie的怪異盒模型
padding-box：將padding算入width範圍
DIV CSS兩種盒子模型
利用css來布局頁面布局div有點邏輯性 重點理解盒子模型,標準 流和非標準流的區別,還有定位原理 把這3個攻破了,就非常簡單了 多實踐多參考 最後就是相容問題了,在實踐中自然就有經驗了 這些相容技巧都是經驗來的 盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各...
技術 DIV CSS兩種盒子模型
利用css來布局頁面布局div有點邏輯性 重點理解盒子模型,標準流和非標準流的區別,還有定位原理 把這3個攻破了,就非常簡單了 多實踐多參考 最後就是相容問題了,在實踐中自然就有經驗了 這些相容技巧都是經驗來的 盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不...
CSS兩種盒子模型詳解
所有html元素可以看作盒子，在css中，css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。margin 外邊距 清除邊框外的區域，外邊距是透明的。border 邊框 圍繞在內邊距和內容外的邊框。pa...