CSS盒模型

1.盒子模型就是把HTML頁面中的元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器。每個(gè)矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。

2.內(nèi)邊距出現(xiàn)在內(nèi)容區(qū)域的周圍，當(dāng)給元素添加背景色或背景圖像時(shí)，該元素的背景色或背景圖像也將出現(xiàn)在內(nèi)邊距中。

3.外邊距是該元素與相鄰元素之間的距離。

4.如果給元素定義邊框?qū)傩?，邊框?qū)⒊霈F(xiàn)在內(nèi)邊距和外邊距之間。

5.盒子=內(nèi)容+內(nèi)邊距+邊框+外邊距。

書寫格式

分寫：

border-top-style:樣式;

border-top-width:寬度;

border-top-color:顏色;

合寫：

單一個(gè)方向邊框：border-top:寬度 樣式 顏色;

樣式綜合設(shè)置：border-style:上邊 [右邊 下邊 左邊];

寬度綜合設(shè)置：border-width:上邊 [右邊 下邊 左邊];

顏色綜合設(shè)置：border-color:上邊 [右邊 下邊 左邊];

邊框綜合設(shè)置：border:四邊寬度 四邊樣式 四邊顏色;

邊框樣式屬性值

none：無，此值是默認(rèn)值；

solid：?jiǎn)螌?shí)線；

dashed：虛線；

dotted：點(diǎn)線；

double：雙實(shí)線。