---
# System prepended metadata

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

---

# T1-new-v4 code review
###### tags: `好想工作室`
2022.03.11（Fri.）（Sherry）

```
HTML：
1.<h1>去包<a>即可
2.footer的社群連結可以不用ul、li
CSS：
1.nav的width可以用百分比，不須a+a去推margin-left
（不用抓數字，抓比例）
2.main有背景色
3.main-container上的text-align只作用到image-content
> 把text-align改放到image-content就好
4.paragraph-content裡的p若改設margin-top會發生margin-collapse
> 可以改display為inline-block
5.fontawesome的部份再下text-align-last: center;
> 因為在footer-container下了text-align-last: justify;
> 影響到了裡面的fontawesome
```

****

# <font color="#3881a1">HTML</font>
## 1. `<h1>`去包`<a>`即可
## 2. footer的社群連結可以不用ul、li
太多層了（沒有必要）

****

# <font color="#3881a1">CSS</font>

## 1. nav的width可以用百分比，不須a+a去推margin-left
（不用抓數字，抓比例）
因為有在header-container上下了text-align-last: justify; ，所以nav也繼承到了此屬性，會自行推開間距。
## 2. main有背景色
## 3. main-container上的text-align只作用到image-content
> 把text-align改放到image-content就好
## 4. paragraph-content裡的p若改設margin-top會發生margin-collapse
> 參考網址：
> 1. [box model w3c](https://www.w3.org/TR/CSS22/box.html#collapsing-margins)
> 2. [CSS Margin Collapse w3c](https://www.w3schools.com/css/css_margin_collapse.asp)
> 3. [Margin Collapse w3c規範](https://www.w3.org/TR/CSS21/box.html#propdef-margin)
> 4. [CSS collapsing margins 重疊問題](https://z3388638.medium.com/%E7%AD%86%E8%A8%98%E4%B8%80%E4%B8%8B-css-collapsing-margins-%E9%87%8D%E7%96%8A%E5%95%8F%E9%A1%8C-a35fd838f1ae)
> 5. [CSS 原理 - Block Formatting Context](https://yachen168.github.io/article/Block-formatting-context.html)

* 可以改display為inline-block
* Margin Collapse只會發生在上下（不會發生在左右）
## 5. fontawesome的部份再下text-align-last: center;
> 因為在footer-container下了text-align-last: justify;
> 影響到了裡面的fontawesome