# 第一週｜課程直播｜切版班 by Sz
###### tags: `Sz` `第一週` `直播筆記` `2021夏季切版班`
## 其他事項
- 直播會有錄影檔、之後也有每日（除了假日），課程網頁那邊看
- 純新手記得看前導影片
- 影片一年後會關閉
## 難度曲線
最低就業門檻：八週做完喔～（切版工程師）

## block / inline
`block`：左右填滿
`inline`：只有佔地面積算
`inline-block`：區塊與區塊並排，不過其實現在用 flexbox 比較多

## container / wrapper
滿版區塊代表他是自由的，不要把它放到容器內，因為網站會有載具的不同、縮放字體的不同，滿版會不受限制的填滿畫面
- `.container>header`： 框起來
- `header>.container`：自由發展

## 語意化、語意化、語意化
讓人看不懂就釘牆上

## css reset / normalize
目前市面上瀏覽器有很多種
每種都會有自己的預設樣式
工程師在加入自己的樣式前
會習慣先把預設清空或統一
避免加上去之後在不同瀏覽器樣式不統一的情形。
好多句字數一樣

* BS5、本身是設計師：normalize 好用
* 工程師：reset 澈底
* 更極端：自己寫囉

## box-sizing: boder-box;
- `padding-box`：寬度只算到`padding`，`border`額外加在外面
- `border-box`：寬度算到`border`

## line-height
* 單行：代表高
* 多行：代表行距
* 設定零：高度就是零

字的高度是用`line-height`推出來的
外頭是 `block` 時高度時要小心
有時候是padding+line-height
有時候是height+加置中
（還在思考）

## p (block element)
高度看`line-height` 為主
* 只加 `font-size`：高度會超出一點點，不受控制（firefox）
* 只加 `height`：從 `line-height` 最高點開始往下算高度（字會置頂）
* 只加 `line-height`：從字體中央（含底線）往上下擴張到高度
* 只加 `padding` 上下，`line-height`設零：從字體中央往上下擴張到高度

### a(inline element)
* `a` 會比 `p` 的 `height` 高一咪咪 (firefox，inherit、拿掉underline都一樣)
* `line-height`：無效（本身高無效但佔用空間會）
* 高度看 font-size, padding

#### 設定 display:block
- line-height 有效
- 變得跟 p 一樣囉

## img
> margin bottom 3px why

會有預設有2~3px的留白

解決方案：
- [ ] `display:block`
- [ ] `vertical-align:middle`

## code 排版
>可以點VS code左下齒輪 然後選設定 搜尋打Format On Save 然後把他打勾 儲存時候會自動幫你排版
>[name=zoom留言那邊偷偷貼過來的]

>auto indent