CSS盒模型

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

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

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

4.如果給元素定義邊框屬性，邊框將出現(xiàn)在內邊距和外邊距之間。

5.盒子=內容+內邊距+邊框+外邊距。

書寫格式

分寫：

border-top-style:樣式;

border-top-width:寬度;

border-top-color:顏色;

合寫：

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

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

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

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

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

邊框樣式屬性值

none：無，此值是默認值；

solid：單實線；

dashed：虛線；

dotted：點線；

double：雙實線。