在h5技術中，css框模型又稱為盒子模型（box model），它就像我們日常生活中的常見事物——盒子，是用來描述html元素形成的。
盒模型是css中使用的一種思維模型，可分為兩類，一類是標準盒模型是w3c盒模型標準，另一類是怪異盒模型（也稱ie模型）是ie低版本盒模型標準，；那盒模型具體是由哪幾部分組成的？
來看看我們的盒子圖
根據這張圖我們可以由外而內看到margin、border、padding、auto這幾個單詞，但你如果因此斷定這就是它的組成就大錯特錯了，實際上除了圖中公尺黃色、灰色、淺紫色之外還有最中心的淡綠色模組，它就是我們會在瀏覽器最終顯示出來的模組——content，而上面提到的auto是自動的意思。
所以，盒模型是由margin、border、padding、content四部分組成的。
content（內容）區域是寫盒子裡面需要顯示出來的文字/等資訊。
例如以下div裡的img、h4標籤中的內容
border（邊框）可以建立不同寬度、樣式和顏色的邊框。
例如以下div的樣式
"border: 1px solid red">
border
padding（內填充/內邊距）根據上面圖中淺紫色的區域可知，它是content和border之間的區域，這個區域在瀏覽器中可見但並不明顯，這個屬性當你需要把內容往裡縮時可以適當把值調大，反之亦可。
如下
"padding: 15px; border: 1px solid red;">
border
margin（外邊距）根據上圖公尺黃色區域可知，它是border和虛線間的區域，也是盒子模型的最外層區域，這個區域在瀏覽器中可見但也不明顯，這個屬性可以應用在移動位置、調整不同容器的間距等。"margin:10px; padding: 15px; border: 1px solid red;">
border
標準盒模型和怪異盒模型的異同點：
相同：兩類盒模型組成部分相同（content、padding、border、margin）
異同：兩類模型寬高及所佔空間總高度不同（計算方法不同）
標準盒模型的寬度：左右padding+左右border
所佔空間總寬度=width+左右padding+左右border+左右margin
怪異盒模型的寬度：width（padding和border）
所佔空間總寬度=width+左右margin
怪異盒需要css3屬性box-sizing來設定
語法：box-sizing：content-box|border-box|inherit；
box-sizing：content-box；預設值，為w3c盒模型
box-sizing：border-box；ie盒模型
盒子模型組成部分
border邊框 border width定義邊框粗細，單位是px border style邊框的樣式 border color邊框顏色 border簡寫 border 1px solid red 沒順序 border collapse collapse 合併相鄰的邊框 會影響盒子實際大小 cont...
盒模型 盒子的組成部分
box 盒子，每個元素在頁面中都會生成乙個矩形區域 盒子 盒子型別 1.行盒，display等於inline的元素 2.塊盒，display等於block的元素 行盒在頁面中不換行，塊盒獨佔一行 display預設值為inline 瀏覽器預設樣式表設定的塊盒 容器元素 h1 h6 p 常見的行盒 s...
方法組成部分
public static void main string args 訪問許可權修飾符 public protected private 預設 什麼都不寫 普通修飾符 static final abstract 返回值型別 有返回值型別 所有的資料型別都可以充當返回值型別 無返回值型別 void ...