---
# System prepended metadata

title: T1-new-v2 code review
tags: [好想工作室]

---

# T1-new-v2 code review
###### tags: `好想工作室`
2022.03.03（Thu.）（佳萱）

```
CSS：
1.vertical-align的default是對齊baseline
>practice：用vertical-align去排列H2O
2.選擇器再熟練
3.<main>的部份可以用百分比去做排版
4.width: fit-content（好用！
5.元素的預設位置在靠左上方
6.min-width可以直接下在整個<body>上，不用一個個去下
7.<footer>中li的vertical-align: middle沒用處
8.float清除浮動的方式：display: flow-root（好用！
>清除浮動的原因：BFC
>可以看規範W3C L8,L9,L10
>也可以看yachen IT 鐵人版
其他：
1.試著不用術語去解釋自己是怎麼切版、為什麼這樣切
```

****

# <font color="#3881a1">CSS</font>
## 1. vertical-align的default
* default：baseline
* 適用於：inline-level、table-cell

## 2. 選擇器
> [CSS selectors MDN](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Selectors)

* 後代選擇器：
    ```css=
    A B{css內容}
    ```
    * 『空格』用以選擇某個元素後代的元素。
    * 作用於A元素的++所有後代++B元素。
* 子代選擇器：
    ```css=
    A>B{css內容}
    ```
    * 『>』用以選擇某個元素後代的元素。
    * 作用於A元素的++第一代++後代B元素。
* 一般兄弟選擇器：
    ```css=
    A~B{css內容}
    ```
    * 『~』用以選擇某個元素之後同層級的元素。
    * 作用於A元素後++同層級++的B元素。
* 相鄰兄弟選擇器：
    ```css=
    A+B{css內容}
    ```
    * 『+』用以選擇緊接在後的元素，並共享父元素。
    * 作用於緊跟在A元素後的B元素。

## 4. width: fit-content
將元素寬度收縮為內容寬度（下在父元素，寬度會符合子元素寬度）

## 5. 元素的預設位置
左上角

## 6. min-width可以下的位置
min-width不需要個別下在每一個區塊上（例如header、main、article、footer等等），而是直接下在`<body>`上

因為下的min-width都一樣，可以統一下在一個地方，這樣也會比較好管理（例如說我現在要修改min-width，就不必一一去修改，而是找body的min-width修改就可以了）。

## 8. float清除浮動的方式
在父元素下了float之後，想清除浮動，可以直接在同個地方下『display: flow-root;』即可。
> 1. 清除浮動的原因：BFC
> 2. 可以看[規範W3C](https://www.w3.org/TR/CSS22/Overview.html#minitoc) L8,L9,L10
> 3. 可以看[yachen IT 鐵人版](https://ithelp.ithome.com.tw/users/20120740/ironman/2632?page=1)
> 4. [CSS 原理 - Block Formatting Context](https://yachen168.github.io/article/Block-formatting-context.html#more)

****

# <font color="#3881a1">其他</font>
## 1. 試著不用術語去解釋
試著不用術語去解釋自己是怎麼切版、為什麼這樣切

* 為什麼裡面還要一層container？
container用來排位置，讓版面置中
* 為什麼不直接下在外面（例如說header）？
如果直接在外面置中的話，背景顏色沒辦法處理
* section-container背景有顏色，所以用padding推出去，而非用margin
* conatainer用來排版，content用來放元素