盒模型是CSS布局的基礎(chǔ)髓涯，主要由三部分組成：邊框杂数、內(nèi)邊距、外邊距锉试。
邊框(border)
1. 四個(gè)邊的邊框
| 屬性 | 作用 |
|---|---|
border-width |
邊框的寬度 |
border-style |
邊框的樣式 |
border-color |
邊框的顏色 |
例如：
border-width: 1px;
border-style: solid;
border-color: red;
邊框可以三個(gè)屬性簡寫猫十，格式如下：
border: 寬度 樣式 顏色;
例如：
border: 1px solid red;
這一行代碼與以上三行完全一致。
2. 單個(gè)邊的邊框
2.1 上邊邊框
| 屬性 | 作用 |
|---|---|
border-top-width |
上邊框的寬度 |
border-top-style |
上邊框的樣式 |
border-top-color |
上邊框的顏色 |
例如：
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
簡寫格式border-top: 寬度 樣式 顏色;
例如：
border-top: 1px solid red;
這一行代碼與以上三行完全一致呆盖。
2.2 右邊邊框
| 屬性 | 作用 |
|---|---|
border-right-width |
右邊框的寬度 |
border-right-style |
右邊框的樣式 |
border-right-color |
右邊框的顏色 |
例如：
border-right-width: 1px;
border-right-style: solid;
border-right-color: red;
簡寫格式border-right: 寬度 樣式 顏色;
例如：
border-right: 1px solid red;
這一行代碼與以上三行完全一致拖云。
2.3 下邊邊框
| 屬性 | 作用 |
|---|---|
border-bottom-width |
下邊框的寬度 |
border-bottom-style |
下邊框的樣式 |
border-bottom-color |
下邊框的顏色 |
例如：
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;
簡寫格式border-bottom: 寬度 樣式 顏色;
例如：
border-bottom: 1px solid red;
這一行代碼與以上三行完全一致。
2.4 左邊邊框
| 屬性 | 作用 |
|---|---|
border-left-width |
左邊框的寬度 |
border-left-style |
左邊框的樣式 |
border-left-color |
左邊框的顏色 |
例如：
border-left-width: 1px;
border-left-style: solid;
border-left-color: red;
簡寫格式border-left: 寬度 樣式 顏色;
例如：
border-left: 1px solid red;
這一行代碼與以上三行完全一致应又。
3. 四個(gè)邊的邊框簡寫
下面的三個(gè)屬性實(shí)際上是一個(gè)簡寫宙项，可以用來分別設(shè)置四個(gè)邊框的寬度、樣式和顏色株扛。
| 屬性 | 作用 |
|---|---|
border-width |
左邊框的寬度 |
border-style |
左邊框的樣式 |
border-color |
左邊框的顏色 |
3.1 邊框的寬度
一個(gè)屬性值：上下左右四個(gè)邊框使用相同的寬度尤筐。
例如：border-width:四個(gè)邊框?qū)挾?/code>兩個(gè)屬性值：上下兩個(gè)邊框使用相同的寬度，左右兩個(gè)邊框使用相同的寬度洞就。
例如：border-width:上下邊框?qū)挾?左右邊框?qū)挾?/code>三個(gè)屬性值：上邊框?qū)挾扰璺保笥覂蓚€(gè)邊框使用相同的寬度，下邊框?qū)挾取?br> 例如：
border-width:上邊框?qū)挾?左右邊框?qū)挾?下邊框?qū)挾?/code>四個(gè)屬性值：上左下右四個(gè)邊框按照順序使用各不相同的寬度旬蟋。
例如：border-width:上邊框?qū)挾?右邊框?qū)挾?下邊框?qū)挾?左邊框?qū)挾?/code>
3.2 邊框的風(fēng)格
一個(gè)屬性值：上下左右四個(gè)邊框使用相同的風(fēng)格改基。
例如：border-style:四個(gè)邊框風(fēng)格兩個(gè)屬性值：上下兩個(gè)邊框使用相同的風(fēng)格，左右兩個(gè)邊框使用相同的風(fēng)格。
例如：border-style:上下邊框風(fēng)格 左右邊框風(fēng)格三個(gè)屬性值：上邊框風(fēng)格秕狰，左右兩個(gè)邊框使用相同的風(fēng)格稠腊，下邊框風(fēng)格。
例如：border-style:上邊框風(fēng)格 左右邊框風(fēng)格 下邊框風(fēng)格四個(gè)屬性值：上左下右四個(gè)邊框按照順序使用各不相同的風(fēng)格鸣哀。
例如：border-style:上邊框風(fēng)格 右邊框風(fēng)格 下邊框風(fēng)格 左邊框風(fēng)格
3.3 邊框的顏色
一個(gè)屬性值：上下左右四個(gè)邊框使用相同的顏色架忌。
例如：border-color:四個(gè)邊框顏色兩個(gè)屬性值：上下兩個(gè)邊框使用相同的顏色，左右兩個(gè)邊框使用相同的顏色我衬。
例如：border-color:上下邊框顏色 左右邊框顏色三個(gè)屬性值：上邊框顏色叹放，左右兩個(gè)邊框使用相同的顏色，下邊框顏色挠羔。
例如：border-color:上邊框顏色 左右邊框顏色 下邊框顏色四個(gè)屬性值：上左下右四個(gè)邊框按照順序使用各不相同的顏色井仰。
例如：border-color:上邊框顏色 右邊框顏色 下邊框顏色 左邊框顏色
內(nèi)邊距(padding)
內(nèi)邊距是元素邊框與元素內(nèi)容之間的空白區(qū)域，與表格cellpadding相似
| 屬性 | 作用 |
|---|---|
padding-bottom |
元素的下內(nèi)邊距 |
padding-left |
元素的左內(nèi)邊距 |
padding-right |
元素的右內(nèi)邊距 |
padding-top |
元素的上內(nèi)邊距 |
以上可以使用簡寫
padding: 上內(nèi)邊距 右內(nèi)邊距 下內(nèi)邊距 左內(nèi)邊距;
padding: 上內(nèi)邊距 左右內(nèi)邊距 下內(nèi)邊距;
padding: 上下內(nèi)邊距 左右內(nèi)邊距;
padding: 上下左右內(nèi)邊距;
外邊距(margin)
外邊距是元素邊框外的空白區(qū)域破加。
| 屬性 | 作用 |
|---|---|
margin-bottom |
元素的下外邊距 |
margin-left |
元素的左外邊距 |
margin-right |
元素的右外邊距 |
margin-top |
元素的上外邊距 |
以上可以使用簡寫
margin: 上外邊距 右外邊距 下外邊距 左外邊距;
margin: 上外邊距 左右外邊距 下外邊距;
margin: 上下外邊距 左右外邊距;
margin: 上下左右外邊距;
