文章目錄
CSS複習篇
一、簡介
下圖是一張框模型的示意圖：
在上圖中，可以看到，元素框的最內部分是實際的內容，他有width和height兩個基本屬性，直接包圍內容的是內邊距padding，內邊距呈現了元素的背景，它的邊緣就是邊框border，邊框以外就是外邊距margin，外邊距默認是透明的，因此不會遮擋後面的任何元素。
二、外邊距（margin）
外邊距就是元素與元素之間的距離，主要由四部分組成，分別是：margin-top（上外邊距）、margin-right（右外邊距）、margin-botton（下外邊距）、margin-left（左外邊距），可以用這些語句設置其中一個屬性，也可以使用margin將四個屬性一起設置。當需要單獨設置某一個外邊距時：
margin-top:<length> | auto | ;
1、只設置一個外邊距的值
margin: 5px;
上述語句中，5px就代表上、下、左、右這四個外邊距的值都爲5像素
2、設置兩個外邊距的值
margin: 5px 10px;
上述語句中，兩個屬性值中間用空格隔開，其含義代表該元素的上下外邊距爲5像素，左右外邊距爲10像素
3、設置三個外邊距的值
margin: 5px 10; 15px;
三個屬性值中間用空格隔開，含義爲該元素的上外邊距爲5像素，左右外邊距爲10像素，下外邊距爲15像素
4、設置四個外邊距的值
margin: 5px 10px 15px 20px;
從頂端開始，按照順時針的順序，依次描述各個外邊距的值。
三、內邊距（padding）
內邊距就是元素的內容與對象邊框之間的距離，通過padding屬性進行設置，和上個部分幾乎一模一樣
四、邊框（border）
邊框的屬性，主要通過設置邊框顏色（border-color）、邊框寬度（border-width）以及邊框樣式（border-style）完成的
1、邊框的顏色屬性border-color
border-color:color;
使用下面代碼，分別設置上、右、下以及左邊框的顏色：
border-color:#f00 #0f0 #00f #0ff;
使用下面代碼，可以設置上邊框顏色：
border-top-color:#f00;
2、邊框的樣式屬性border-style
主要來設置邊框的樣式，語法如下：
border-style: dashed|dotted|double|groove|hidden|inset|outset|ridge|solid|none;
屬性值含義如下表所示：
| 屬性 | 含義 |
|---|---|
dashed |
虛線 |
dotted |
點線 |
double |
雙線 |
groove |
3D凹槽 |
hidden |
隱藏邊框 |
inset |
3D凹邊 |
outset |
3D凸邊 |
ridge |
菱形邊框 |
solid |
實線 |
none |
沒有邊框 |
3、邊框的寬度屬性border-width
border-width:medium|thin|thick|length
medium：默認邊框寬度thin：比默認邊框寬度窄thick：比默認邊框寬度寬length：指定具體的線條的寬度