理解盒模型

盒子的分類
不一樣元素產生不一樣的盒子類型可能不一樣，一個元素產生什麼樣的盒子取決於css的display屬性
- 屬性：display
- 是否能繼承：否
- 默認值：inline

盒子的組成
- margin：外邊距（與其餘的盒子的距離）
- border：邊距
- padding：內邊距（邊框與內容之間的距離）
- cotent：內容（內容的寬度與高度）
margin
表示邊框和相鄰盒子的距離分爲上（top）右（right）下（bottom）左（left）四個方向
>
> div{
>            margin-top :  10px ;
>      }
margin-top   上外邊距 /  不可繼承  /  默認值：0px


- margin有1個數值：上下左右
- margin有2個數值：上下 / 左右
- margin有3個數值：上 / 左右 / 下
- margin有4個數值：上 / 右 / 左 / 下

border 邊框
分割內部和外部的界限，上（top）右（right）下（bottom）左（left）。
- 上邊框的樣式
> border-top-style
> 不可繼承 ；默認none 
> solid  實線 / dashed   虛線  /  dotted  點陣 / double 雙實線

- 上邊框的厚度
> border-top-width
> 默認值 medium  /  通常用px ；em

- 上邊框的顏色
> border-top-color
縮寫 ：border-top  (厚度 樣式 顏色)
padding

表示邊框和內容盒子的距離分爲上（top）右（right）下（bottom）左（left）四個方向
>
> div{
>           padding-top :  10px ;
>      }
padding-top   上外邊距 /  不可繼承  /  默認值：0px


- padding有1個數值：上下左右
- padding有2個數值：上下 / 左右
- padding有3個數值：上 / 左右 / 下
- padding有4個數值：上 / 右 / 左 / 下
content
width
height
子盒子
邊框盒 border-box 由border，padding，content 組成
1. 瀏覽器調試時，頁面中顯示的頁面尺寸
2. 元素的背景，默認覆蓋邊框盒（元素的背景色，從邊框盒開始渲染）
3. background-clip 設置背景色的渲染區域

填充盒子 由padding ，content 組成
1. 溢出overflow 指填充盒的溢出

內容盒子 由content組成
outline 不佔像素，但無樣式。