Udemy課程：[The Web Developer Bootcamp 2021（Colt Steele）](https://www.udemy.com/course/the-web-developer-bootcamp/)
# 第 8 節： The CSS Box Model
###### tags: `CSS` `Udemy` `The Web Developer Bootcamp 2021`
2021.05.03（Mon.）～05.04（Tue.）
## ● 上課筆記
## CSS Box Model
### （1）**border properties：**

| 類別 | 內容 |
| -------- | -------- |
|border-width|Controls the thickness of the border|
|border-color|Controls the color of the border|
|border-style|Controls the line style,like dash,solid etc.|

* <font color="red">box-sizing: border-box;</font>
加上上述元素樣式後，這個元素的內距和邊框將不會增加元素本身的寬度。

### （2）**padding：**
> 「內距」，可以想像成皮膚跟肌肉的距離。
* padding: 10px;
<font color="#e3b10b">padding: Apply to all four sides;</font>
* padding: 5px 10px;
<font color="#e3b10b">padding: vertical | horizental;</font>
* padding: 1px 2px 2px;
<font color="#e3b10b">padding: top | horizental | bottom</font>
* padding: 5px 1px 0px 2px;
<font color="#e3b10b">padding: top | right | bottom | left</font>（順時針）

### （3）**magin：**
> 「外距」，順序跟內距一模一樣。
* margin: 10px;
<font color="#e3b10b">margin: Apply to all four sides;</font>
* margin: 5px 10px;
<font color="#e3b10b">margin: vertical | horizental;</font>
* margin: 1px 2px 2px;
<font color="#e3b10b">margin: top | horizental | bottom</font>
* margin: 5px 1px 0px 2px;
<font color="#e3b10b">margin: top | right | bottom | left</font>（順時針）

### （4）**display properties：**
| 內容 | 說明 | 預設舉例 |
|------| ---- | -------|
|block|可以設定高度（height）、寬度（width）、上方與下方距離，自動換行| div、p、ul、li |
|inline|高度與寬度都不能設定，文字或圖片所佔的寬度就是他的寬度 | span、a、input、img、em |
|inline-block|不會自動換行|img、input、select、button|

* block
<font color="#254263">會填滿整行，所以兩個block元素碰在一起，會強迫換行。</font>

* inline
<font color="#254263">文字就是他的寬度，所以可以用文字大小來撐開。
padding跟margin只能動左右，上下不會被影響。</font>

* inine-block
<font color="#254263">跟inline一樣的方式呈現，就是不會自動換行，但又擁有block的特性，可以調整長、高。</font>

* <font color="red">inline跟inline-block的差異</font>
使用margin跟padding可以明顯看出兩者差異：
1. inline：

2. inline-block：

### （5）CSS Units
* **Relative：**
em、rem、vh、vw、%...and more！
* **Absolute：**
px、pt、cm、in、mm

1. em：
1em就是指與他的父元素字體大小一樣。
2em就是指與他的父元素字體大小2倍一樣。
（以此類推）

2. rem：
跟em很像，只是他是以「root html的元素（根元素）」來取倍數。