一、邊框屬性
作用：給元素加上一個邊框
第一種：
border-top
border-bottom
border-left
boder-right
三個屬性值: 粗細 線型 顏色
第二種：
border ：粗細 線型 顏色
整個邊框部分的調整。
透明色：transparent
允許你為元素添加圓角邊框的屬性：border-radius
border-style的常見屬性值：
| 值 | 描述 |
|---|---|
| none | 定義無邊框。 |
| hidden | 與 "none" 相同。不過應用於表時除外，對於表，hidden 用於解決邊框沖突。 |
| dotted | 定義點狀邊框。在大多數瀏覽器中呈現為實線。 |
| dashed | 定義虛線。在大多數瀏覽器中呈現為實線。 |
| solid | 定義實線。 |
| double | 定義雙線。雙線的寬度等於 border-width 的值。 |
二、輪廓
作用：繪制於元素周圍的一條線，位於邊框外
用法跟border一樣
屬性： 粗細 線型 顏色
outline-width: 20px;
outline-style: solid;
outline-color: red;
三、元素的分類
塊級元素：獨占一行，對寬高設置有效，如果我們不給寬度的話，撐滿整行，如果不給高度，高度會隨着內容的變化而變化
行內元素：設置寬高是無效的，不獨占一行多個標簽是可以同時存在一行的。完全是靠內容撐開的。
行內塊元素：不是獨占一行，設置寬高有效，並且可以多個標簽存在一行。
可以使用 display 來改變元素的分類
display的常見屬性值：
| 值 | 描述 |
|---|---|
| none | 此元素不會被顯示。 |
| block | 此元素將顯示為塊級元素，此元素前后會帶有換行符。 |
| inline | 默認。此元素會被顯示為內聯元素，元素前后沒有換行符。 |
| inline-block | 行內塊元素。（CSS2.1 新增的值） |
| list-item | 此元素會作為列表顯示。 |
| run-in | 此元素會根據上下文作為塊級元素或內聯元素顯示。 |
| table | 此元素會作為塊級表格來顯示（類似 <table>），表格前后帶有換行符。 |
| inline-table | 此元素會作為內聯表格來顯示（類似 <table>），表格前后沒有換行符。 |
| table-row-group | 此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。 |
| table-header-group | 此元素會作為一個或多個行的分組來顯示（類似 <thead>）。 |
| table-footer-group | 此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。 |
| table-row | 此元素會作為一個表格行顯示（類似 <tr>）。 |
| table-column-group | 此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。 |
| table-column | 此元素會作為一個單元格列顯示（類似 <col>） |
| table-cell | 此元素會作為一個表格單元格顯示（類似 <td> 和 <th>） |
| table-caption | 此元素會作為一個表格標題顯示（類似 <caption>） |
| inherit | 規定應該從父元素繼承 display 屬性的值。 |
四、盒子模型
盒子模型的構成部分
- Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
- Border(邊框) - 圍繞在內邊距和內容外的邊框。
- Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
- Content(內容) - 盒子的內容，顯示文本和圖像。
組成： 內容 內邊距 邊框 外邊距
邊框：border
內邊距：padding 邊框和內容之間的距離
padding 存在一個值 上下左右都是改值
存在兩個值時分別對應 上下一個值 左右一個值
存在三個值時分別對應 上 左右 下
存在四個值時分別對應 上右下左
可以單獨的去設置 例如 padding-top
外邊距：margin 元素和元素之間的距離
用法同padding，它改變的是外邊距