# T1-new-v1 code review
###### tags: `好想工作室`
2022.02.24（Thu.）（Wendy）

Html：
1.命名問題
2.main的範圍
3.font-awesome fa-fw用法
CSS：
1.img外的容器設定寬高，img寬高設100%+objext-fit
2.在container上設font-size，不用在最外層容器下
3.border-radius再大一些
4.button加上hover效果
5.水平置中不同用法（例如說block、inline-block的水平置中方法不同）
6.margin collapse
其他：
1.閱讀器

****

# <font color="#3881a1">Html</font>
## 1. 命名問題
> 參考網址：
> 1. [前端人員必看CSS命名規範](https://www.itread01.com/articles/1489384810.html)
> 2. [CSS 撰寫技巧及規範﹍維護心得整理](https://www.wfublog.com/2019/05/css-structure-maintenance-skill.html)

(1)頁面結構
- 容器: container
- 頁頭：header
- 內容：content/container
- 頁面主體：main
- 頁尾：footer
- 導航：nav
- 側欄：sidebar
- 欄目：column
- 頁面外圍控制整體布局寬度：wrapper
- 左右中：left right center

(2)導航
- 導航：nav
- 主導航：mainbav
- 子導航：subnav
- 頂導航：topnav
- 邊導航：sidebar
- 左導航：leftsidebar
- 右導航：rightsidebar
- 菜單：menu
- 子菜單：submenu
- 標題: title
- 摘要: summary

(3)功能
- 標誌：logo
- 廣告：banner
- 登陸：login
- 登錄條：loginbar
- 註冊：regsiter
- 搜索：search
- 功能區：shop
- 標題：title
- 加入：joinus
- 狀態：status
- 按鈕：btn
- 滾動：scroll
- 標簽頁：tab
- 文章列表：list
- 提示信息：msg
- 當前的: current
- 小技巧：tips
- 圖標: icon
- 註釋：note
- 指南：guild
- 服務：service
- 熱點：hot
- 新聞：news
- 下載：download
- 投票：vote
- 合作夥伴：partner
- 友情鏈接：link
- 版權：copyright

## 2.main的範圍
可參考[coursera](https://www.coursera.org/browse?source=deprecated_spark_cdp)的排版方式，用main把網頁主要內容全包起來。

==原因==：[`<main>`MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/main)

## 3.fontawesome fa-fw用法
加上fa-fw這個class，就可以讓icon的寬度都一致
> 參考網址：
> 1. [fontawesome fa-fw](https://fontawesome.com/v4/examples/)
> 2. [其他用法](https://ithelp.ithome.com.tw/articles/10185595)

****

# <font color="#3881a1">CSS</font>
## 1.img寬高設定+object-fit
img外的容器設定寬高，img寬高設100%+objext-fit
==原因==：
如果照片要做更換，這樣的設置才不會破壞版面。把img外面的容器固定好，就不會因為換了不同大小的圖片而有版面變化。

* Html部份：

<a>
    <img src="./img/logo.png" alt="logo">
</a>

* CSS部份：

a{
    width: 40px;
    height: 50px;
}
img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

* 補充：[object-fit MDN](https://developer.mozilla.org/zh-TW/docs/Web/CSS/object-fit)
object-fit: contain;可使該物件填入內容框時，仍保持原本的寬高比。

img{
    object-fit: contain;
}

## 5.水平置中不同用法
（例如說block、inline-block的水平置中方法不同）
> 參考網址：[css水平置中方法](https://medium.com/jarvishhc/%E5%AD%B8%E7%BF%92%E7%B6%B2%E9%A0%81%E9%96%8B%E7%99%BC%E5%88%B0%E7%8F%BE%E5%9C%A8-%E6%88%91%E4%B8%80%E7%9B%B4%E8%A6%BA%E5%BE%97%E5%88%87%E7%89%88%E6%98%AF%E6%88%91%E7%9A%84%E5%BC%B1%E9%A0%85-%E5%B0%A4%E5%85%B6%E6%98%AF%E6%B0%B4%E5%B9%B3%E7%BD%AE%E4%B8%AD%E5%92%8C%E5%9E%82%E7%9B%B4%E7%BD%AE%E4%B8%AD-%E5%B0%8E%E8%87%B4%E4%B9%8B%E5%89%8D%E5%9C%A8%E7%B7%B4%E7%BF%92%E6%95%99%E6%A1%88%E7%9A%84%E6%99%82%E5%80%99-%E9%83%BD%E9%9C%80%E8%A6%81%E8%8A%B1%E8%A8%B1%E5%A4%9A%E6%99%82%E9%96%93%E5%8E%BB%E6%9F%A5%E8%B3%87%E6%96%99%E5%92%8C-try-and-696199935fd)

1. inline-block + text-align: center
2. block + margin: 0 auto
3. position: absolute + left: 50% + transform: transitionX(-50%)

* 垂直置中
1. inline-block + verticle-align: middle
2. position: absolute + top: 50%　+ transform: transitionY(-50%)

## 6.margin collapse
> 參考網址：[margin collapse MDN](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)

當一個block設定了margin-bottom，另個block設定了margin-top，在都設定的情況下，就只會留下最大的那個margin，這種情況叫做margin collapse。（float、絕對定位的元素不會發生margin collapse）

****

# <font color="#3881a1">其他</font>
## 1. 閱讀器 Browser reader mode