css盒狀模型用於描述乙個為html元素形成的矩形盒，盒狀模型為各個元素調整外邊距、邊框、內邊距和內容的具體操作。
css盒狀模型
body
.model
.model1
.model2
.model3
如上述body盒狀模型內容的寬度為500px,高度為300px,內邊距為200px,邊框寬度為20px。
如圖：
圖中900x700代表整個盒子的大小。900x700=(500+200x2)x(300+200x2),即盒子整體大小為內容所佔容量加上內邊距所佔的容量。由於width為500px,height為300px,所以如果在盒子中放內容的話，它只能佔500x300的大小，即內邊距佔盒子的大小但不允許放內容。
對於大盒子中的小盒子的定位問題，小盒子的外邊距的起始以大盒子的內容區域開始，所以小盒子的外邊距所佔區域加內邊距所佔區域加內容區域為大盒子的內容區域。
如圖：大盒子布局：
內建小盒子：
其中橘紅色為外邊距，淺綠色為內邊距局，藍色為內容區域，小盒子的外邊距+內邊距+內容區域=大盒子的內容區域（小盒子的內容區域為預設值時）。
對於小盒子設定內邊距來說，內邊距區域以小盒子的內容區域為基準即小盒子的內邊距區域隨小盒子的內容區域變化而變化。
而小盒子的外邊距以大盒子的內容區域為基準即外邊距區域隨大盒子的內容區域變化而變化。
小盒子的內容區域不一定非比大盒子的內容區域的小，完全可以設定小盒子的內容區域比大盒子的內容區域大。當小盒子的內容區域比大盒子的內容區域大時，小盒子的外邊距此時仍舊隨大盒子的內容區域變化，此時小盒子的左邊距仍舊正確，右外邊距會向右擴充套件設定的大小即在大盒子的內容區域的基礎上向右擴充套件相應距離。
如圖：大盒子布局
小盒子布局：
其中大盒子的內容區域設定為500x300，小盒子內容區域為width=600,由於小盒子內容區域大小已經比大盒子的整個區域大，所以在外邊距上左外邊距設定正常，右邊距在大盒子的內容區域基礎上向右擴充套件150px。
如果給盒狀模型定義背景，定義後背景將在內容（content）區域和內邊距（padding）區域顯示，就是圖上的淺藍色區域，外邊框是無法設定背景的。
盒狀模型有內至外的順序是：padding設定的是內容到邊框之間的距離，就像乙個緩衝帶。 border設定內容的邊框線粗線和樣式等。 margin設定的是一塊內容與另一塊內容之間的距離。 使用css定義盒狀模型時，我們設定的寬度和高度，只是設定了內容（content）區塊的高度和寬度，而不是內容、內邊距、邊框和外邊距的總和。
CSS盒狀模型
css盒狀模型是大多數css布局與定位的基礎，它以包含4個成分的有界限的盒子來描述網頁中的每個元素。盒狀模型示意圖如下圖所示。盒子的尺寸 內容尺寸 width height 內邊距 padding 邊框粗細 border 外邊距 margin 一 在給元素設定背景時 ie作用域 content pa...
css盒模型與層模型與定位
盒子壁 border 內邊距 padding 內容區 content 外邊距 margin 改變盒子渲染規則 boxsize border box ie盒模型 w3c盒模型 盒子可視區域區別於盒模型 可視區域 border padding content 切記 不計算margin 乙個div作為另乙...
CSS盒模型 定位流 浮動流
一 盒模型 1 border 寬度 樣式顏色 2 padding 內邊距 3 margin 外邊距 垂直方向會合併 4 content 其它操作 1 box sizing content box 預設 border box 固定元素大小 2 水平居中 1.margin 0 atuo 盒子居中 2.t...