# T3-v2 code review
###### tags: `好想工作室`
2022.08.09（Tue.）（Mango）

HTML：
1. <a>裡面的type="button"可以拿掉
2. footer的<h4>（mobile版本）與<div class="h4">（desktop版本）兩個標籤互換一下（因為desktop版本時更適合<h4>這個標籤）

CSS：
1. 一些基本css的default了解
2. .body__container的text-align: center;應該個別下在需要的地方就好
3. inline-block裡面可以包block嗎？
4. 刪除掉做出輪播圖之前的一些多餘程式碼
5. 輪播圖下方有兩區塊，上區塊可以用大容器推，使上下兩區塊一致
6. 縮小時<h2>會消失，所以就不用幫他加上「太多字讓他變成點點點」
7. <h3>的部份（有2處）應該抽出來另外命名一個class，而非直接用<h3>去改css（會污染到）（<h4>也是）
8. white-space: normal; 可以刪除
9. footer的font-szie: 0;可以刪除

bootstrap：
1. navbar中.container存在的意義？
2. navbar的結構怪怪的
3. accordion-collapse用d-lg-flex改成d-lg-block
4. img-fluid中用到了max-width，那麼width跟max-width的差異？

其他：
1. css檔案拆開來、分開來管理
2. 命名方法
3. 現在手機最小支援到320px！
4. 給看版前先自己一行行看過（就像其他人看版時會做的事情），看有沒有多餘的，可能有忘記刪除的
5. tips of the weeks區塊在mobile模式下，排版順序修改

****

# <font color="#3881a1">HTML</font>
## 1. `<a>`裡面的type="button"可以拿掉
> 參考資料：[Is it alright to have an anchor type=button?](https://stackoverflow.com/questions/25838318/is-it-alright-to-have-an-anchor-type-button)


裡面提到type="button"只能用於`<input>`跟`<button>`。

****

# <font color="#3881a1">CSS</font>
## 1. 一些基本css的default了解
> 參考資料：[Default CSS Values for HTML Elements](https://www.w3schools.com/cssref/css_default_values.asp)

| css | default |
| ---- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| body | display: block;<br>margin: 8px; |
| h1 | display: block;<br>font-size: 2em;<br>margin-top: 0.67em;<br>margin-bottom: 0.67em;<br>margin-left: 0;<br>margin-right: 0;<br>font-weight: bold; |

h1, h2, h3, h4, h5, h6的預設都是同樣的7項，差別在於上下margin以及font-size的不同。

另外h4沒有font-size的變化，也就是說他的font-size為預設的1em（等同於16px）。

:::danger
平常都會習慣在css程式碼最前方下：

*{
    padding: 0;
    margin: 0;
}

但是這次將上面的程式碼移除後，發現並沒有變化（等於多下了沒用處的程式碼），後來知道body的default原來只設下了margin: 8px;，並沒有推padding。

又因為在bootstrap中，它有給body一個預設margin: 0;的關係，所以就不需要再自己下一次了。
:::

## 2. .body__container的text-align: center;
### 目的
.body__container的text-align: center;應該個別下在需要的地方就好。

原先text-align的default是left，若直接下在最外層，有些原本就希望為預設靠左的，又會因為這條css而需要再次做變更。

所以把text-align: center;下在需要的地方就好了。

### 作法
1. 先在google dev tool 將 .body__container的text-align: center;拔除。
2. 另外設一個class命名為text-align-center。
3. 開始看.body__container的text-align: center;拔除有誰變化了
* navbar__brand
* navbar__nav
* carousel__indicators
* copy right的地方
4. 把text-align: center這個class加到上面四層上

:::danger
tex-align會繼承，所以父元素如果有下text-align，要注意它的子元素也會受影響。

text-align的default是start。start的作用為「如果內容方向是左至右，則想像left，反之則為right。」。

text-align只適用於block元素中。
(vertical-align只適用於inline元素或table元素)
:::

## 3. inline-block裡面可以包block嗎？
> 參考資料：[混血兒 inline-block](https://ithelp.ithome.com.tw/articles/10219161)

inline 裡面只能包 inline
block 裡面可以包 block 跟inline-block
inline-block 裡面可以包 block 跟inline-block

## 5. 輪播圖下方有兩區塊，上區塊可以用大容器推，使上下兩區塊一致
### 原先：不一致
上區塊：左右兩側靠內元素推padding
下區塊：左右兩側靠外容器推padding

### 想法
原本想說把上區塊也改成靠外容器推padding，但會影響到裡面小方塊hover時背景色不完善。

所以決定改下區塊，讓下區塊也變成靠內元素推padding。

### 作法
1. 下區塊padding移除：
.section__container--tips中的padding: 0 10px;移除。
2. 下區塊左半部推左側padding：
.image__container--tips改為padding: 0 0 0 10px;
3. 下區塊右半部推右側padding：
.image__container--tips+article改為padding: 0 10px 0 20px;

****

# <font color="#3881a1">Bootstrap</font>
## 1. navbar中.container存在的意義？
### 修改前的樣子

### 目的
.navbabr__content那層的.container感覺很沒有必要，可移除看看。

### 作法
直接把該行刪除，也沒有任何影響。

## 2. navbar的結構怪怪的
### 目的
參考了Bootstrap官方文件提供的[navbar結構](https://getbootstrap.com/docs/5.0/components/navbar/#nav)

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </div>
</nav>

先把他畫成一張簡單的結構圖

再看看自己寫的，主要差在綠色框框部份，其他的結構都與bootstrap相同。（這裡問題不大先跳過）

更重要的部份是：

用了bootstrap的class".row"，但是我只希望row作用於帶有.navbar-brand的`<a>`以及帶有.navbabr-toggler的`<button>`
但目前的.row卻作用於3處，結構錯誤了

### 解決方法 - row底下的結構
先將結構改變，把上圖黃色第3處（最下方的黃框navbar-collapse的部份）拉出來（如下圖）

但會發現排版變成這樣（如下圖），原因大概是因為那張logo圖跟導覽列現在都是flex，而flex排版方向flex-direction預設為row

所以到最外層（包住.navbar__content--row以及.navbar-collapse的.navbabr__container）上加上flex-direction： column;

這個時候排版上下排列了，但是變成個樣子

不過猜測只要把.navbar-collapse的width撐開到100%就可以了

就成功了！

## 3. accordion-collapse改成d-lg-block
accordion-collapse原本用d-lg-flex改成d-lg-block，原因是flex是用於排版，但是.accordion-collapse底下只有一個ul，用flex怪怪的。

## 4. img-fluid中用到了max-width，那麼width跟max-width的差異？
先從[bootstrap的CDN](https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.css)去查詢，.img-fluid在css中改了什麼：
在[官方文件](https://getbootstrap.com/docs/4.0/content/images/#responsive-images)中可以看到他對.img-fluid的解釋，代表可以跟著父元素縮放：

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

這裡拆成 max-width: 100%; 以及 height: auto; 去做分析
### width: 100%; vs. max-width: 100%;
> 測試：[codepen 測試](https://codepen.io/fgfjgror/pen/WNzKVqX?editors=1100)
>
> 參考資料：[请教一下，img标签设置max-width: 100%和width: 100%的问题。](https://segmentfault.com/q/1010000008451702)

1. **width: 100%;**
無論如何，都會與父層元素同寬。
2. **max-width: 100%;**
max-width就是個管理員，控制溢出寬度，保障寬度不會溢出。
所以如果默認寬度在父容器寬度範圍之內，那max-width就不會管你了。
e.g. max-width: 100%; 用在圖片上：
* 圖片寬度 < 父層寬度
（在範圍之內，max-width懶得管）
-->圖片寬度不會有變化，以圖片原始寬度顯示
* 圖片寬度 > 父層寬度
（超過父層了，max-width不允許這種事情發生）
-->圖片寬度會變100%，誰的100%？父層的100%。所以此時的圖片寬度便會與父層容器等寬。

### max-width: 100%; 解讀
max-width: 100%;即最大寬度為父元素寬度的100%
i.e.最大寬度為父元素寬度，一旦子元素寬度超過父元素寬度，便是以父元素寬度來顯示; 相反地，若沒有超過，則保持子元素自己本身的寬度。

### height: 100%; vs. height: auto;
> 參考資料：[difference between css height : 100% vs height : auto](https://stackoverflow.com/questions/15943009/difference-between-css-height-100-vs-height-auto)

1. **height: 100%;**
gives the element 100% height of its parent container
2. **height: auto;**
means the element height will depend upon the height of its children

先是看到上面的資料，但總覺得怪怪的，因為現在height: auto;是下在圖片上，圖片哪來的children，所以決定再繼續找資料，就看了底下的影片。

> 參考資料：[What's the deal with height: auto?](https://www.youtube.com/watch?v=SjYYfd7obug)

看完影片後，發現之前在W3school有看過得height的auto屬性，但是那時候不太理解上面寫得意思，所以轉而去看stackoverflow，但現在看過上面的影片，才突然了解W3school的解釋。

> 參考資料：[W3School CSS height Property](https://www.w3schools.com/cssref/pr_dim_height.asp)

> If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly.

如果元素有hight: auto;這個屬性的話，這個元素會自動調整他自身的高度，使得該元素的內容（content可能是文字或圖片），可以正確的顯示在元素的容器內（基本上就是不會溢出，但也不會過大）。

****

# <font color="#3881a1">Other</font>
## 1. css檔案拆開來、分開來管理
### 目的
有管理性，就像是在貼標籤，比較好記憶做了什麼，也比較不會因為忘記之前有下了什麼css，之後又有新的css覆蓋過去，卻忘了刪掉舊的css的情況。

### 舉例
reset可以個別一個css檔管理
針對Bootstrap預設修改的css也可以另外一個檔案管理

### 以T3來說

T3
├─ style.css
└─ bootstrap-modify.css
     ├─ 覆蓋bootstrap default
     └─ components
            ├─ navbar
            ├─ carousel
            └─ accordion

主要把他分成兩個檔案，分別為++style.css++、++bootstrap-modify.css++
* ++style.css++：一般切版的內容
* ++bootstrap-modify.css++（分成4個區塊）
* bootstrap default：用來覆蓋bootstrap default
* components - navbar
* components - carousel
* components - accordion

## 2. 命名方法
自己的命名與bs命名區分方法：
1. 加上前綴（ex.T3-命名）
2. 分不同檔案（用dev tool看class可以看出他來自哪個檔案）

## 5. tips of the weeks區塊在mobile模式下，排版順序修改
### 原本：mobile模式下，上下區塊的比較
上區塊：標題 --> 圖片 --> 文字

下區塊：圖片 --> 標題 --> 文字

### 目的
應該要順序一致「標題 --> 圖片 --> 文字」(難)
也可以「標題 --> 文字 --> 圖片」（簡單）

### 想法

有找到一個css語法，flex的order屬性，可以透過此屬性來改變HTML的DOM順序，但order屬性僅限於下在父層有display: flex;的子元素上。

所以只能改變img與article（左區塊與右區塊），也就是只能達成簡單版本的排版。

後來想到其實可以利用bootstrap中的display property。

先改變一下結構：
1. 原先的程式碼：
2. 修改後的程式碼：

成功了！

後面只要稍微調整下margin或padding：
（middle臨界尺寸為768px）
1. 在middle尺寸以下，img的左側padding移除
2. 在middle尺寸以下，給推一點img的margin-bottom，讓他與ol保持一點距離。
---->可以使用＠media screen and(max-width: 768px)

真正完成的樣子！

### 統整
1. simple version：「標題 --> 文字 --> 圖片」
利用 flex+order。
2. difficult version：「標題 --> 圖片 --> 文字」
利用 bootstrap 的 display property，再稍微修改下HTML的DOM。

****

# <font color="#3881a1">第2次討論</font>
## 1. 排版順序
延續[上次的問題](https://hackmd.io/8XfzbEtYSva424_m7JWvpg?both#5-tips-of-the-weeks%E5%8D%80%E5%A1%8A%E5%9C%A8mobile%E6%A8%A1%E5%BC%8F%E4%B8%8B%EF%BC%8C%E6%8E%92%E7%89%88%E9%A0%86%E5%BA%8F%E4%BF%AE%E6%94%B9)，雖然解決了，但是用兩張圖片改變HTML結構的方法，就沒有機會練習到RWD，RWD主要練得部份是去思考怎麼利用現有（原有）的結構，在改變尺寸大小時，讓他的排版去做流動，進而變成想要的樣子。

Mango給關鍵字「display: grid;」，感覺可以先用codepen玩玩看！

## 2. 先不要reset
不管有沒有用到bootstrap，都先不要reset，觀察看看有什麼特別大的差異。