所有html元素可以看作盒子，在css中，css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括：邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
margin(外邊距)- 清除邊框外的區域，外邊距是透明的。
border(邊框)- 圍繞在內邊距和內容外的邊框。
padding(內邊距)- 清除內容周圍的區域，內邊距是透明的。
content(內容)- 盒子的內容，顯示文字和影象
其中，分為兩種，分別為w3c盒模型（標準盒模型）和ie盒模型（怪異盒模型）
w3c盒模型，元素內容佔據的空間由width屬性設定，padding和border的值另外計算。
即：盒子實際總寬度、總高度 = 設定的width、height + border + padding + margin
設定的width、height = 盒子內容content 的width、height
如上圖資料： 盒子實際總寬度width = 200px + 50px + 50px +50px
盒子實際總高度height = 20px + 50px + 50px +50px
盒子內容content 的width = 設定的width200px
盒子內容content 的height= 設定的height20px
ie盒模型，
盒子實際總寬度、總高度 = 設定的width、height + margin = 盒子內容content 的width、height +padding + border + margin
設定的width、height = 盒子內容content 的width、height + padding + border
如上圖資料： 盒子實際總寬度width = 200px + 50px + 50px +50px
盒子實際總高度height = 200px + 50px + 50px +50px
設定的 width = 盒子內容content 的width200px+ padding50px+ border50px
設定的 height = 盒子內容content 的height20px +padding50px+ border50px
css3指定盒子模型種類
box-sizing 屬性，允許以特定的方式定義特定元素
box-sizing:content-box (w3c標準盒模型)
box-sizing:border-box (ie怪異盒模型)
DIV CSS兩種盒子模型
利用css來布局頁面布局div有點邏輯性 重點理解盒子模型,標準 流和非標準流的區別,還有定位原理 把這3個攻破了,就非常簡單了 多實踐多參考 最後就是相容問題了,在實踐中自然就有經驗了 這些相容技巧都是經驗來的 盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各...
css盒子模型 CSS 盒子模型詳解（一）
在網頁布局中，一定離不開盒子模型這個東西。今天就來說一下這個概念。所謂盒子模型 box model 就是把 html 頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。或者說，每乙個可見的 html 元素都是乙個盒子。每個矩形都由元素的內容 content 內邊距 padding 邊框 b...
技術 DIV CSS兩種盒子模型
利用css來布局頁面布局div有點邏輯性 重點理解盒子模型,標準流和非標準流的區別,還有定位原理 把這3個攻破了,就非常簡單了 多實踐多參考 最後就是相容問題了,在實踐中自然就有經驗了 這些相容技巧都是經驗來的 盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不...