盒模型主要由4部分組成：外邊距（margin）、邊框（border）、內邊距（padding）、內容（content），可以理解為我們日常生活中的乙個快遞盒子，外邊距相當於快遞盒與快遞盒之間的距離，邊框相當於快遞盒，內邊距相當於快遞盒裡裝的東西與快遞盒內部之間的距離（類似於防震填充物，即填充層），而內容則相當於快遞盒裡面裝的東西。由此可知，快遞盒與快遞盒之間不僅有距離，而且還可以緊挨在一起，所以盒模型可以控制盒子與盒子之間的距離，緊挨或者浮動。
另外如果對盒子的3d模型能夠有一定的理解的話，那麼在網頁開發時可以更有利於對開發布局的理解，而且也便於對內容進行更好的操作和工作。盒子的3d模型與photoshop裡面的圖層編輯類似，共5層，從上到下分別為：第一層為邊框層，第二層到第五層分別為：內容+內邊距、背景影象、背景顏色、外邊距。（這個有什麼用呢？例：當和背景影象在在同乙個塊裡面時，可能會把背景影象給遮住，這時可以利用這一特性，另外再結合盒模型的padding屬性就能解決這個問題了，即根據實際的情況，分別設定padding的上下左右四個方向的值）
要注意的地方：
1.盒模型元素有上下左右4個方向的屬性值，而且是順時針方向，即上右下左，所以當設定方向的屬性值為3個的時候，則為第乙個屬性值~第三個屬性值分別為：上、左右、下；當設定的屬性值為2個的時候，第乙個屬性值為上下，第二個屬性值為左右；當設定的屬性值為乙個的時候，即4個方向的屬性值都一樣，這樣是為了方便簡寫。
2.border：必須要同時設定大小、樣式、顏色這3個屬性值才能顯示效果，而且屬性值之間是空格（英文輸入法狀態下）
3.有時候瀏覽器會預設地為標籤新增一些填充，所以有時候就會出現有邊距和邊框的情況，所以為了避免這些情況，應該在一開始的時候對**進行初始化一下：*
CSS盒模型理解
盒模型 由外到內的公式表示 box margin border padding content。content不是屬性，為內容，以文字或節點存在占用位置。理解 快遞包裹 兩個快遞包裹間的距離就是margin，快遞包裹的紙皮就是border，開啟快遞包裹，填充物料就是padding，把填充物料開啟看到...
對盒模型的理解
首先這是我第一次寫部落格，請大家多關照。寫的不好的地方請指出來。下面由我來說下我對盒模型的理解。我呢是乙個剛入門三個禮拜的小白，我自認為學前端跟其他的科目是不一樣的。前端是聽得懂，但自己動手時就不會去做。可能這都是小白的必經之路吧。盒模型是網頁布局的基石，盒模型由盒子內容 盒子內填充 盒子本身 盒子...
對盒模型的理解
盒模型分為兩種，一種是ie盒模型，一種是w3c盒模型。ie盒模型用於ie6一下版本的瀏覽器，它的content的寬度是包括了padding和border的 w3c盒模型 content的寬度不包括padding和border 此外兩種盒模型都包括margin 外邊距 在元素外建立額外的空白，空白通常...