網頁：內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)， css盒子模式都具備這些屬性。
這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。
想象乙個盒子，它有：外邊距（margin）、邊框（border）、內邊距（padding）、內容（content）四個屬性；讓我們俯視這個盒子，它有上下左右四條邊，所以每個屬性除了內容（content），都包括四個部分：上下左右；這四部分可同時設定，也可分別設定；內邊距可以理解為盒子裡裝的東西和邊框的距離，而邊框有厚薄和顏色之分，內容就是盒子中間裝的東西，外邊距就是邊框外面自動留出的一段空白。
內容（content）就是盒子裡裝的東西；而填充(padding)就是怕盒子裡裝的東西（貴重的）損壞而新增的泡沫或者其它抗震的輔料；邊框(border)就是盒子本身了；至於邊界(margin)則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出。在網頁設計上，內容常指文字、等元素，但是也可以是小盒子（div巢狀），與現實生活中盒子不同的是，現實生活中的東西一般不能大於盒子，否則盒子會被撐壞的，而css盒子具有彈性，裡面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充只有寬度屬性，每個html標記都可看作乙個盒子；
1.外邊距 margin;
2.盒子壁 border;
3.內邊距 padding;
4.盒子內容 width+height;
width和height均指的是內容的寬度和高度，而不是整個的寬度
例如：
>
class
="div1"
>
aaabbbccc
div>
body
>
結果:
其中padding+width+height為內容可展示區域，例如設定底色後，padding是可見的。而margin則是內容不展示區域，設定了底色之後，內容為不可見。而對於巢狀的元素，也只是在content內，不涉及padding和margin。
先了解一些知識點:
padding:4，3，2，1個值分別代表含義:
padding:100 100 100 100 是乙個復合值，順序為上、右、下、左;（為順時針方向）
padding:100 100 100 為 上、[左、右]、下
padding:100 100 為 [上、下]、[左、右]
padding:100 為 [上、下、左、右]
margin:4，3，2，1個值分別代表含義:
margin為4個時，margin:上 右 下 左;（為順時針方向）
margin為3個時，margin:上 [左、右] 下;
margin為2個時，margin:[上、下] [左右];
margin為1個時，margin:[上、右、下、左];
日常比較常見，需要記住:
盒子模型計算:
**：
class
="example1"
>
div>
class
="example2"
>
div>
//realheight:102px
//realwidth:102px
body
>
可知道：對於example1而言，其可視區的高度：100(內容)+10(border-top)+10(border-bottom)+10(padding-top)+30(padding-bottom) = 160px; 寬度： 100+10+10+20+20=160px
對於：example2,其可視區的高度：100(內容)+1×
\times
× 2(border)+ 30×
\times
× 2= 162px;寬度： 100+20×
如果在乙個選擇器中有兩個相同的屬性，那麼後面的值會覆蓋前面的值，如果兩個選擇的權值相等，則後面的選擇器會覆蓋前面的選擇器中相同的屬性的值。
>
class
="example"
>
div>
body
>
結果:
>
>
div>
body
>
結果:
CSS學習筆記（三） 盒子模型
在css語言中有padding margin border屬性來調整三個區域的寬度，border的型別樣式等內容 用border style設定邊框風格，可以單獨設定乙個邊 屬性值說明 none 無邊框dotted 點狀邊框，大多數瀏覽器顯示實線 solid 實線double 雙線，寬度等於bord...
CSS（六） 盒子模型（css學習重點之一）
css學習三大重點 css 盒子模型 浮動 定位 盒子模型有元素的內容 邊框 border 內邊距 padding 和外邊距 margin 組成。border 分為 border width border style border color屬性 作用border width 定義邊框粗細，單位是p...
CSS精簡筆記（三） 盒子模型
1.3 背景復合寫法 二 邊框 三 盒子陰影 擷取放入盒子 任意拉伸放入盒子 精靈圖 css寫法 box margin 外邊距，用於配置盒子之間的間距 border 邊框，下圖紅線，設定盒子邊框 padding 內邊距，設定內容與邊框的間距，用於調整內容布局 復合寫法 border 3px soli...