# [CSS] Box Model

## 🔅 **Content**
##### 🔸網元素本身呈現的內容
> #### 網頁元素產生的容器通常都會有<font color="#f00">「寬度與高度」</font>

##### 🔸網頁中大多數的元素都可以調整寬度和高度

| 樣式屬性 | 說明 |
| ------------ |:------------------------------------ |
| `width` | 寬度 |
| `height` | 高度 |
| `max-width` | 最大寬度 |
| `min-width` | 最小寬度 |
| `max-height` | 最大高度 |
| `min-height` | 最小高度 |
| `inline ` | x不能調整 |
| `auto ` | 內容自動撐開，或根據內容寬高比例換算 |

## 🔅 **padding**
##### 🔸網頁元素容器由內而外的第一層就是「內邊距」
> #### `padding` 是元素裡的「內邊距」，也就是元素由內而外，<font color="#f00">緊連著內容的第一層</font>，網頁中所有元素的內邊距 `padding 預設都是 0`

p {
  padding: 25px 50px 75px 100px; /*上右下左*/           
}

p {
  padding: 25px 50px 75px; /*上(左右)下*/
}

p {
  padding: 25px 50px; /*(上下)(左右)*/
}

p {
  padding: 25px; /*(上右下左)*/
}

##### 🔸單一內邊距的樣式屬性，單獨設定上下左右數值

| 單一內邊距樣式 | 說明 |
| ---------------- | ---------- |
| `padding-top ` | 上方內邊距 |
| `padding-right` | 右側內邊距 |
| `padding-bottom` | 下方內邊距 |
| `padding-left` | 左側內邊距 |
| `auto ` | 0 |

## 🔅 **border**
##### 🔸邊框是網頁元素內邊距與外邊距之間的線段
> #### `border` 是元素裡的「邊框」，也就是元素由內而外，在<font color="#f00">內邊距和外邊界中間的的線段</font>，`網頁中大部分元素 border 預設都是 none`，因此大部分元素都不會有邊框

p {
  border: 25px 50px 75px 100px; /*上右下左*/           
}

p {
  border: 25px 50px 75px; /*上(左右)下*/
}

p {
  border: 25px 50px; /*(上下)(左右)*/
}

p {
  border: 25px; /*(上右下左)*/
}

##### 🔸單一邊框的樣式屬性，單獨設定上下左右的邊框

| 單一內邊距樣式 | 說明 |
| --------------- | ---------------------- |
| `border-top` | 上方邊框 |
| `border-right` | 右側邊框 |
| `border-bottom` | 下方邊框 |
| `border-left` | 左側邊框 |
| `border-width` | 邊線的寬度 |
| `border-color` | 邊線的顏色 |
| `none` | 沒有邊框，邊框寬度為 0 |
| `hidden` | 隱藏邊框，邊框寬度為 0 |
| `solid` | 實線 |

##### 🔸邊框圓角 `border-radius `是邊框的特殊樣式，透過不同的半徑圓角，調整四個角落的圓角
> #### `border-radius` 設定「左上、右上、右下、左下」四個角落的邊框`「圓角半徑」`</br>預設圓角半徑為 0，半徑從「容器邊框外緣往內計算」

p {
  border-radius: 25px 50px 75px 100px; /*左上 右上 右下 左下*/           
}

p {
  border-radius: 25px 50px 75px; /*左上 (右上左下) 右下*/
}

p {
  border-radius: 25px 50px; /*((左上右下) (右上左下)*/
}

p {
  border-radius: 25px; /*(上右下左)*/
}

## 🔅 **margin**
##### 🔸在元素的外面，還有一層使用 margin 控制樣式的「外邊界」
> #### `margin` 是元素模型裡的<font color="#f00">「外邊界」</font>，也就是在網頁元素容器主體外面延伸出去的空間

p {
  margin: 25px 50px 75px 100px; /*上右下左*/           
}

p {
  margin: 25px 50px 75px; /*上(左右)下*/
}

p {
  margin: 25px 50px; /*(上下)(左右)*/
}

p {
  margin: 25px; /*(上右下左)*/
}

##### 🔸單一外邊界的樣式屬性，單獨設定上下左右數值

| 單一內邊距樣式 | 說明 |
| --------------- |:---------------------- |
| `margin-top` | 上方外邊界 |
| `margin-right` | 右側外邊界 |
| `margin-bottom` | 下方外邊界 |
| `margin-left` | 左側外邊界 |
| `auto` | 預設外邊界值 |
| `hidden` | 隱藏邊框，邊框寬度為 0 |
| `solid` | 實線 |