前端基礎：QA
切版教學
在這邊就只記錄我觀察到的模式。
切版顧名思義就是切出一個類似的版面模型。可以用很多東西去替代那些元素，只需要看起來像那個版型就是了。
所以在切版練習的時候，可以拿一個網站的版型為例子，然後自己試著去切出相似的即可。
在切版的時候：
- 先觀察版塊，看看有幾大塊需要切，然後先在 html 內部分別利用 利用 <div> 標籤 分出幾大區塊，然後在這些區塊內分立 class 命名，以方便使用 CSS 去調整。
- 接著再分別處理大區塊內的小區塊，也是按照步驟 1 的模式，去把這邊的區塊稍微區分一下。
- 一直區分直到剩下很小的元素。
- 然後再從大區塊開始，逐步往小區塊利用 CSS 做修飾，使整個版形越來越類似目標。
- 直到整個雛形都差不多了，可以再觀察一下有沒有哪些細節需要修整，需要修就修一修，使整個版型看起來雷同即可。
-
我想在實務上的切版應該也是類似的情況，一邊在觀察切版的時候，我也一邊發想，可能每個人需要的模式不一樣吧？我會覺得說，在練習的時候，可以試著為 class 添加 border: 1px 來方便自己觀察這個標籤的設置是否正確，畢竟有框在那邊應該會使人比較容易聯想如何處理。
Float vs Flexbox vs Grid
Float
比較舊的了，比較少人在用，如果要支援比較舊的瀏覽器還是要知道。IE 11 以下的瀏覽器。
Flexbox
ie 11 以上的瀏覽器都支援，非常好用
Grid
比較新的規格，現在瀏覽器支援度也滿高了。與有 flexbox 相比是在不同的場景有不同的應用
題外話：vertical-align vs align-items
CSS vertical-align 屬性的功能可以用來設計網頁中圖片在垂直方向的對齊方式，以往在網頁內容中若是有插入圖片，預設效果可能不太美觀，也許圖片與文字難以對齊，網頁設計師可以透過 CSS 的 vertical-align 來處理，無論是要讓圖片靠上對齊、置中對齊還是要靠下對齊都可以做到，而且目前新版的主流瀏覽器都支援 vertical-align 屬性的效果。by vertical-align
CSS 看起來很亂怎麼辦？
很多時候是命名的問題，只要有規則的命名就會好些。或是之後可以學到一些更好用的方法來解決這個問題。
reset.css vs normalize.css
reset.css
不同瀏覽器會做一些自己的東西，有時候是按照自己喜好來設定，有時候是標準不清楚，所以會有不同的預設樣式。reset.css 會針對所有標籤來下 css，例如說會清空所有的設置，之後在調整一些樣式，by GitHub。所以可以保證在其他的瀏覽器都可以是清空的一個狀態，不會有預設的樣式，以避免不同瀏覽器長的不一樣。 reset.css 設定的東西，通常我們都比較不會去設置變動，所以假設有動到也沒關係，就是蓋過去而已。
normalize.css
是用來取代 reset.css 的，功能也類似 reset.css。其官方網站，內部可以看到很多資料。normalize.css 的目的是與其清空所有的預設樣式，不如去 follow 瀏覽器的樣式，就是讓大家盡量一致卻又不會有一些 bug。所以不會硬是要把樣式清除掉，每家瀏覽器都可以有最原始的表現，chrome 的按鈕樣式，就是要用 chrome 的風格，safari 的按鈕樣式，就維持原來的風格，不強求大家都一樣。現在很多家都在用這個規範。
查找資料的時候如何確定沒有過時？
資訊過時歸過時，頂多就是該資源比較舊一點而已，頂多是少一點醉心的資料介紹，因為在學習的時候還是必須要從最原始的東西學起，也因為這樣的緣故，其實資訊沒這麼容易過時，有時候一些很舊的東西還是有機會用到，還是得要稍微了解或知道一下。
如何找到網頁的最後更新時間？
DevTools 裡面找 header 在找 Response Header 之後看到 Last-Modified 這個就是檔案的最後修改時間。而不是同欄位的 Date ，這個 Date 是回應這個 response 的時間。不過這個不一定準，因為有時候稍微接觸一下檔案，這個檔案時間也會變動，就是有參考價值。
收穫：
在這裡就是學到了切版的方式，然後明白切版的流程是怎麼做的，我會覺得一樣就是把大方向簡化成小細節，然後再從小細節修整起，逐步完成所有的內容，就可以得到一個切版的結果。剩下就是得到更多的 CSS 資料，了解到一些狀況的處理，以及原來還有 reset.css 這樣方便的工具，可見得瀏覽器之間真的會有不少的差異存在，所以才會有這麼多的工具方便大家使用。
