盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣外形和平行空間。他有：外邊距（margin）、邊寬（border）、內邊距（padding）、內容（content）如下圖：
簡單來說：內容（content）就是盒子裡裝的東西，填充（padding）就是我們每次拿快遞時怕東西損壞而放的塑料泡沫等一些的填充物，邊框（border）就是的盒子的本身，外邊界（margin）就是盒子和盒子之間的距離。
來看下下面的一段**：
顯示出來的效果是這樣的：
為了增加效果的我把字寫上去了，這樣看起來更清楚些。
在上面的例子中：
1.內容區域是最內部的裡「我是內容」鋪滿的，由width：100px；height：100px；定義的
2.內邊距是由padding屬性定義的。
3.邊寬是由border屬性定義的。
4.外邊距是由margin屬性定義的。
padding與margin的作用和使用方法
padding：
作用：用來控制父元素和子元素之間的位置關係;用來控制元素和內容間的位置關係。不可以寫負值。
特點：1.padding值會把元素原有的大小撐大； 如果讓元素原本大小不變得話，需要在元素的寬高上減掉所加的padding；
2.padding屬性對背景 是不起作用的，可以說背景的位置，是不受padding的影響的。
3.背景色會延展到padding區域。
使用方法：
方法一 ：
padding-top: 上填充
padding-right: 右填充
padding-bottom: 下填充
padding-left: 左填充
方法二 ：（復合寫法） 解釋：
padding：1 2 3 4 1、上 2、右3、下4、左
padding：1 2 3 1、上 2、左和右3、下
padding：1 2 1、上和下 2、左和右
padding：1 1、上 右 下 左
margin：
作用：控制同輩元素之間的位置關係。不會影響元素的實際寬高，但是也會曾加的他的所佔區域，可以寫負值。
特點： margin是現在是在元素邊框以外的空白區。
使用方法：
方法一：
margin-top: 上外邊距
margin-right: 右外邊距
margin-bottom: 下外邊距
margin-left: 左外邊距
方法二 ：（復合寫法） 解釋：
margin：1 2 3 4 1、上 2、右 3、下 4、左
margin：1 2 3 1、上 2、左和右 3、下
margin：1 2 1、上和下 2、左和右
margin：1 1、上 右 下 左
關於盒子的大小的計算
如上所述：
元素的總寬度=左外邊距 +左邊寬+左填充+內容寬度+右外邊距 +右邊寬+右填充;
元素的總寬度=margin-left+border-left+ padding-left+width+padding-right+border-right+margin-right；
元素的總高度=上外邊距 +上邊寬+上填充+內容高度+下外邊距 +下邊寬+下填充;
元素的總寬度=margin-top+border-top+ padding-top+height+padding-bottom+border-bottom+margin-bottom；
關於盒模型
一些css盒模型的比較重要的點滴。css盒模型 w3c標準中，width 和 height 指的是內容區域的寬度和高度。增加內邊距 邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的尺寸。一旦為頁面設定了恰當的 dtd，大多數瀏覽器都會按照w3c標準模式呈現內容。然而 ie 5 和 6 的呈現卻...
關於盒模型
盒模型 盒模型的分類 元素產生的盒子型別取決於display屬性，display none 不生成盒子 display inline 行盒 display block 塊盒，會自動換行 組成 margin外邊距 與其他盒子的距離，border邊框，padding 內邊距 邊框和內容之間的距離。con...
關於js 盒模型
1 內容就比如我們所種植的農作物所佔據的範圍。2 填充 padding 是指所種植農作物至區域邊緣之間的距離。3 邊框 border 是指每一塊土地邊緣的厚度。4 外邊距 margin 是指一塊土地與另一塊土地之間的間距。padding是盒子內部，內容與邊緣的距離 padding的作用是控制內容子元...