# T1-v3 code review
###### tags: `好想工作室`
2021.05.07（Fri.）（Teen學姐）

Html：
1.class命名寫完整（ x btn , o button）
2.logo去找有含字的logo圖，用<h1>包<a>再包<img>
（<a>要記得改成inline或inline-block）
3.<a>裡面可以不用再放<span>
4.font awesome取代icon圖片
（把他當成字去做修改，還可以改顏色！超酷 <-能運用在hover上）
5.有些部份可以改用<section>，減少用class
6.alt記得補上文字
7.自己寫的盡量放越下面，以免被蓋到
8.<h1>跟<nav>具唯一性，不用再放class
CSS：
1.用一個min-width下在最外層，每個大區域都要有固定寬度（防跑版）
2.用outline取代border（匡線才不會佔空間造成擠壓跑掉）
3.reset CSS margin跟padding的部份，設0就好，不用設auto
（auto做置中，底下有需要再加上去）
4.<header>的<nav>padding太大了，再做調整
5.vertical-align: middle;加在需要垂直置中的tag上（兩個都要加）
6.inline排版產生的小間隔（用font-size: 0; 解決）
7.兄弟選擇器（X+Y）用在<nav>的選單上很好用
8.通常圖片直接設width: 100%（另外很少會去設置height）
9.圖片位置：vertical-align: bottom（預設是baseline）
10.水平置中不用text-align: center;，可用margin: 0 auto;
11.containing block的概念
12.<main>的部份可以弄成width各為50%
（<img>的部份外面再包一層<div>，才不會直接動到照片）
13.linear-gradient寫法可以更簡潔
14.有些人不會直接改變元素的display，而是加一層<div>再去改
15.可以玩玩看float
16.text-align-last可以不足text-align的缺點
17.盡量不要放在一起改屬性
18.CSS的分法（cosding style）：
外部（padding,margin） 
↓
內部（color,font-size,font-weight）
19.max-width 會覆蓋width設置, 但 min-width設置會覆蓋 max-width
其他：
1.有跑版問題，東西往左擠
（用min,max-width做斷點，防止跑版）
（不會跑版就好，暫時不用做成RWD）
2.多利用google dev tool去找問題

****

# <font color="#3881a1">Html</font>
## 1.

****

# <font color="#3881a1">CSS</font>
## 1.
## 18. CSS的coding style
> 參考網頁：[CSS Coding Standards](https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/)
* 參考順序：

  Display
->Positioning
->Box model
->Colors and Typography（字體相關）
->Other

****

# <font color="#3881a1">其他</font>
## 1.